Frage - jQuery Animation DIV bei Hover verschieben

Kilomoana · 16.03.2012

Moin,

ich bin gänzlich unerfahren, was Javascript angeht, habe mir allerdings mittlerweile ein paar Kleinigkeiten angeeignet um eine Seite mit ein paar dezenten Animationen zu bereichern.

Ich schilder mal mein momentanes Problem:

Es liegen 2 DIV's übereinander, der untere besteht aus einem Hintergrundbild und weiterführendem Text. Der darüberliegende besteht aus einem Bild, dass grob durch eine Überschrift das Thema ankündigt. Nun soll der Interessent mit der Maus über das Bild fahren, der obere DIV verschiebt sich nach links und es kommt der weitere Text zum Vorschein. Dies ist alles ein Link und führt auf einer weitere Seite.

Was klappt, was nicht?!?

Soweit klappt alles, wie ich mir das vorgestellt habe, allerdings fängt der "animierte" DIV an zu stocken, wenn die Maus an der Kante vom einen zum anderen DIV ist. Vermutlich lässt sich das im Code beheben, allerdings weiß ich nicht wie. Ich hoffe es kann geholfen werden.

Hier der bisherige Code:

JS:

Code:

$(document).ready(function(){
    var gassibox = $("#gassiover");
    var gassiboxu = $("#gassi");
    
    gassibox.hover(
    function(){
    $(this).stop().animate({"left": "-280px"}, "slow");
    },
    function() {
    $(this).stop().animate({"left": "0"}, "slow");
    });
    gassiboxu.hover(
    function(){
    gassibox.stop().animate({"left": "-280px"}, "slow");
    },
    function() {
    gassibox.stop().animate({"left": "0"}, "slow");
    });

});

CSS:

Code:

div#gassi {width:280px;height:94px;top:48px;left:0;position:absolute;}
div#gassiover {width:280px;height:94px;background:url(Bilder/Unbenannt-1.jpg) 0 0 no-repeat;top:48px;left:0px;position:absolute;z-index:300;}

Viele Grüße

Alex

Kilomoana · 17.03.2012

AW: Frage - jQuery Animation DIV bei Hover verschieben

Hier ein Beispiel wie es momentan aussieht, bzw. wo momentan der Wurm drin ist.

http://jsfiddle.net/6hrYe/

mindraper · 18.03.2012

AW: Frage - jQuery Animation DIV bei Hover verschieben

hi

zunächst mal bitte das html etwas ändern:

HTML:

<div class="overlay_container">
    <div id="gassi"><p>Gassi-Service - Lorem Ispum</p></div>
    <div id="gassiover" class="overlay">aaaa</div>
</div>

danach kannst du diesen code nutzen:

PHP:

$(function(){

var overlay = $( '.overlay_container' );

    function slideOverlay(e){
        var elemToSlide = $('.overlay', this ),
            isOpen = elemToSlide.hasClass( 'opened' );
        
        if( isOpen ){
            initSlide( elemToSlide, '0px', 600, function(){
                $(this).removeClass('opened');
            });
        } else {
            initSlide( elemToSlide, '300px', 600, function(){
                $(this).addClass('opened');
            });
        }
    }
                
    function initSlide( elem, distance, duration, callback ){
        elem.animate({ left : distance }, duration, callback );        
    }            
    
    overlay.bind( 'mouseenter mouseout', slideOverlay );    
    
});

erklärung:
du hast auf das overlay-element ( also mit der id="gassiover" ) eventlistener gelegt: mouseenter bzw. mouseover und mouseleave bzw. mouseout. wenn dieses element nun ganz nach rechts animiert wurde, befindet sich der mousezeiger aber nicht mehr auf dem element, wodurch noch während der verschiebe-animation schon das mouseleave- bzw. das mouseout-event getriggert wird.

durch die nutzung von .stop() wurd die nachfolgende animation in diesem fall zwar unterdrückt, gefeuert wird sie aber einen kurzen moment dennoch - das ist dein beschriebenes "stocken". der moment, wenn der mauszeiger das overlay-element verlässt.

hoffe das hilft

Kilomoana · 15.04.2012

AW: Frage - jQuery Animation DIV bei Hover verschieben

So,

fast vergessen. Vielen Dank für die Antwort ersteinmal. Mittlerweile habe ich es ein wenig anders gelöst und so auf zwei verschiedene Varianten verwendet.

Zum Einen als kleine Lasche die rechts am Bildschirm mit scrollt und herausschießt, wenn man mit der Maus darüber fährt. Hier der Code:

Code:

// Hovereffekt Leistungen
                // Animation Leistungen

$(document).ready(function(){
    var naviright = $("#navirighta");
    var navirightg = $("#naviright");
    var navirightc = $("#navirightc");
    var animationState = "";
    var timer = null;

    // Hover IN
    var hoverIn =  function(){
        if (animationState != "hoverin") {
            navirightg.stop().animate({"right": "-15px"}, "slow");
            animationState = "hoverin";
        }
    };

    // Hover OUT
    var hoverOut = function() {
        if (animationState != "hoverout") {
            navirightg.stop().animate({"right": "-320px"}, "slow");
            animationState = "hoverout";
        }
    };

    // Benutzerhandlung registrieren aber
    // nicht alles auf einmal ausführen
    var registerAction = function (wantedState) {
        clearTimeout(timer);
        if (wantedState == "hoverin") {
            timer =setTimeout(hoverIn, 100);
        }
        else {
            timer = setTimeout(hoverOut, 100);
        }
    }



    naviright.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout");
    });
    
    navirightc.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout");
    });
    
});

Zum Anderen habe ich das Script in ein Wordpressloop mit eingebaut. Somit kann einer bestimmten Seite sowohl ein Text für einen unteren DIV per Custom Field zugeteilt werden, als auch ein darüberliegender DIV, der aus einem beliebigen Bild besteht.

HTML:

<div id="Leist">
    <?php $start_query = new WP_Query( array(
    'meta_key' => 'position_startseite',
    'meta_value' => '1',
    'post_type' => 'page')); while ( $start_query->have_posts() ) : $start_query->the_post(); ?>
   
    <div class="leistungli"><a href="<?php the_permalink() ?>"><div class="leistung leistung<?php the_ID(); ?>"><p><?php echo get_post_meta($post->ID, 'startseitentext', true); ?></p></div></a><a href="<?php the_permalink() ?>"><div class="leistungover leistungover<?php the_ID(); ?>" style="background:url(<?php echo get_post_meta($post->ID, 'startseitenbild', true); ?>) 0 0 no-repeat;"></div></a></div>
    <script> $(document).ready(function(){
    var leistungover<?php the_ID(); ?> = $(".leistungover<?php the_ID(); ?>");
    var leistung<?php the_ID(); ?> = $(".leistung<?php the_ID(); ?>");
    var animationState = "";
    var timer = null;

    // Hover IN
    var hoverIn =  function(){
        if (animationState != "hoverin") {
            leistungover<?php the_ID(); ?>.stop().animate({"left": "-300px"}, "slow");
            animationState = "hoverin";
        }
    };

    // Hover OUT
    var hoverOut = function() {
        if (animationState != "hoverout") {
            leistungover<?php the_ID(); ?>.stop().animate({"left": "0"}, "slow");
            animationState = "hoverout";
        }
    };

    // Benutzerhandlung registrieren aber
    // nicht alles auf einmal ausführen
    var registerAction = function (wantedState) {
        clearTimeout(timer);
        if (wantedState == "hoverin") {
            timer =setTimeout(hoverIn, 100);
        }
        else {
            timer = setTimeout(hoverOut, 100);
        }
    }



    leistungover<?php the_ID(); ?>.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout");
    });
    leistung<?php the_ID(); ?>.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout");
    });

}); </script>
    <?php endwhile;

        // Reset Post Data
        wp_reset_postdata(); ?>
    </div>