Div ist sprunghaft mit fadeIn jQuery

Question

Wenn ich über .comptext_rollover div rollen sollte es die anfängliche div auf der Seite ausblenden und zeigen die minipage div. aber es tut, aber ist manchmal wirklich sprunghaft und auch die minipage div zeigt manchmal unter der initialpage div. irgendwelche Ideen? sorry ich bin neu zu codieren! Vielen Dank im Voraus.

$(document).ready(function() {

    $('#mini_page').hide();

    $('.comptext_rollover').hover(function() {
        $('#initial_page').hide();
        $('.register_button').hide();
        $('#mini_page').fadeIn(100);
        $('#container').css({
            'margin-top': '-217px'
        });

    }, function() {

        $('#mini_page').hide();
        $('#initial_page').show();
        $('.register_button').show();
        $('#container').css({
            'margin-top': '-150px'
        });

    });

});

Answer 1

Ich habe eine Fiedel-Demo vorbereitet HIER

re-EDIT :

JSFIDDLE DEMO

(die Demo kann fehlerhaft sein, während das Haupt-CSS ein externer Link ist) Ich habe verwendet:

<div id="container">
    <div id="initial_page" class="page">
        <div id="playvideo_hoverbutton"></div>
        <div class="register_button"></div>
        <div id="invisible_register2"></div>

        <div id="termsandconditionsapplyshort"></div>
    </div>

    <div id="mini_page" class="page">
        <div id="minicar_animated"></div>
        <div id="worth25k"></div>
        <div class="register_button"></div>
        <div id="invisible_register"></div>
    </div>

    <!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
    <div class="comptext_rollover">
    <!--<div id="competition_text"></div>-->
    </div>
</div>

$('#mini_page').hide();

$('.comptext_rollover').mouseenter(function() {
    $('.page').fadeToggle(400);
});

$('.comptext_rollover').mouseleave(function() {
    $('.page').fadeToggle(400);
});

Was Sie auf jeden Fall tun sollten:

Position absolute die 2 Bildschirme, die Sie in einen Container "eintauschen" müssen. Was Sie dann tun:

Positionieren Sie das "Rollover"-Element außerhalb der "Bildschirme".

Passen Sie die marginTop des größeren Bildes (Autobild) im CSS an (wie ich es getan habe), um die fehlerhaften "Sprünge" zu beheben.

• IF POSSIBLE: NUR EIN ÜBERSCHLAG-AKTIONSELEMENT!
• Fixieren Sie den oberen Rand des Fahrzeugbildes. (geben Sie ihm ein -Npx)
• Auf diese Weise müssen Sie sich nicht um die Positionierung Ihres Containers kümmern -Npx

Es gibt auch eine einfachere Möglichkeit, den gleichen Effekt zu erzielen: Sie fügen zu BEIDEN Bildschirmen eine Klasse .swappable hinzu, wodurch der zweite (CSS) display:none; , und dann verwenden Sie einfach jQuery toggling nur diese Klasse.

Answer 2

Sie haben nicht viel Zeit für die Einblendung festgelegt. Sie sind auch nur versteckt einige der divs, die die Einblendung bewegt sich je nachdem, wo Sie sie setzen macht. vielleicht verwenden Folien statt. Ich habe hier ein Beispiel gespeichert: http://jsfiddle.net/kBEUH/

$(document).ready(function(){
    $('#mini_page').hide();
    $('.comptext_rollover').hover(function () {
        $('#initial_page').fadeOut(1000);
        $('.register_button').fadeOut(1000);
        $('#mini_page').slideDown(1000);

  }, function(){
        $('#mini_page').slideUp(1000);
        $('#initial_page').fadeIn(1000);
        $('.register_button').fadeIn(1000);

  });
});

Answer 3

Wenn Sie eine console.log in Ihrer hover()-Funktion, werden Sie sehen, hover ist wie verrückt feuern. Dies bewirkt, dass die Animation immer und immer wieder zu starten, während Sie Ihre Maus bewegen.

Sie könnten die Vorteile der jquery :animiert Selektor:

$('.comptext_rollover').hover(function() {

    //enable this line to see the hover event is firing every time your mouse moves
    //console.log("hovering")

    //if the div is in the middle of an animation, do nothing
    if (!$("#mini_page").is(":animated")) {

        $('#initial_page').hide();
        $('.register_button').hide();
        $('#mini_page').fadeIn(100);
        $('#container').css({
            'margin-top': '-217px'
        });

    }

}, function() {

    //etc

});

EDIT: Jetzt denke ich daran, dass Sie wahrscheinlich .mouseenter() y .mouseleave() anstelle von hover()

$('.comptext_rollover').mouseenter(function() {
    //your code
}).mouseleave(function() {
    //your code
});