0

我创建了 2 个列表，一个是按钮列表，另一个是隐藏在页面外的链接列表。当我将鼠标悬停在一个按钮上时，其中一个列表项会以动画方式从页面左侧飞入。这一切都很好，我遇到的问题是要单击链接，我必须将鼠标从再次收回链接的按钮上移开。谁能提出一个更聪明的方法来实现我所追求的。请参阅此 JS fiddle 以供参考：

http://jsfiddle.net/YyEJf/

jQuery代码如下：

jQuery(document).ready(function() {
jQuery("li.fbtrig").hover(
    function(){
       jQuery("li.facebook").animate({'left': '130px'},400);

    },
    function(){
        jQuery("li.facebook").animate({'left': '0px'},400).once();
    }
);  

jQuery("li.twittrig").hover(
    function(){
       jQuery("li.twitter").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.twitter").animate({'left': '0px'},400);
    }
);  

jQuery("li.sctrig").hover(
    function(){
       jQuery("li.soundcloud").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.soundcloud").animate({'left': '0px'},400);
    }
);  

jQuery("li.wptrig").hover(
    function(){
       jQuery("li.blog").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.blog").animate({'left': '0px'},400);
    }
);  

jQuery("li.etrig").hover(
    function(){
       jQuery("li.email").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.email").animate({'left': '0px'},400);
    }
);                              
});
4

2 回答 2

1

你可以尝试这样的事情：

http://jsfiddle.net/XPLde/1/

HTML：

<ul>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
        </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>

</ul>

CSS

ul {width:130px; margin:0; padding:0;}
li {position: relative; height:50px; margin-bottom:5px; background:red;     list-style:none;}
li img {  position:absolute;} 
li a {display:block; width:200px; height:100%; color:#fff; position:relative; background:blue; top:0; left:-230px;}

jQuery

$(document).ready(function() {

        $("li").hover(
            function(){
               $("a", this).stop().animate({'left': '130px'},400);
            },
            function(){
               $("a", this).stop().animate({'left': '-230px'},400);
            }
        );  
});
于 2013-06-10T20:48:48.160 回答
0 
$(function() {
    $(".triggers li").mouseenter(function() {
        $('.buttons li').each(function() {
            $(this).animate({'left': '0'}, 400);
        });

        var hoverEl;
        var $this = $(this);

        if($this.hasClass('fbtrig')) hoverEl = $(".facebook");
        if($this.hasClass('twittrig')) hoverEl = $(".twitter");
        if($this.hasClass('sctrig')) hoverEl = $(".soundcloud");
        if($this.hasClass('wptrig')) hoverEl = $(".blog");
        if($this.hasClass('etrig')) hoverEl = $(".email");

        hoverEl.animate({'left': '130px'}, 400);
    });
});

jsFiddle 代码

于 2013-06-10T21:22:16.823 回答