2012-02-06 19 views
0

私は前後のボタンで動作するjQueryスライダーを持っています。唯一のことは、これらのボタン上にマウスを置くと、次または前のスライドのプレビューが表示され、マウスを移動するとそのスライドが非表示になります。私はちょうどjQueryリストのホバー

<div id="slides"> 
    <ul class="slide_container"> 
     <li class="one slide"></li> 
     <li class="two slide"></li> 
     <li class="three slide"></li> 
    </ul> 
    <div id="slide_nav"> 
     <a href="#" class="prev_slide">&laquo; Previous</a> 
     <a href="#" class="next_slide">Next &raquo;</a> 
    </div> 
</div> 

スライドは幅1440pxです....

$('.next_slide').mouseenter(function() { 
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');        
}); 

私のhtmlがある...それは仕事を得るように見えることはできません。

+0

:(jQueryのサイトから)例えば

答えて

1

これを試してみてください -

$('.next_slide').hover(
    function(){ // OVER 
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo'); 
    }, 
    function(){ // OUT 
    $('.slide_container li').stop().animate({ left: 0 }, 10, 'easeInOutExpo'); 
    } 
); 
0

あなただけのMouseEnterを持って、マウスアウトではありません。両方を定義する必要があります。
Hoverを使用する場合、両方のアクションを同じスクリプトに含めることができます。背景画像とテキストがあります

$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
);