Question

我创建了2个列表，一个是按钮列表，另一个是页面隐藏的链接列表。当我将鼠标悬停在某个按钮上时，其中一个列表项会动画从页面左侧进入。这一切都很好，我遇到的问题是点击链接我必须将鼠标移离按钮，再次缩回链接。任何人都可以建议一种更聪明的方式来实现我所追求的目标。请参阅此JS小提琴以供参考：

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);
    }
);                              
});

Answer 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);
            }
        );  
});

Answer 2

$(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 code

将鼠标悬停在div上以显示链接，但无法点击链接

2 个答案: