jquery鼠标经过离开和点击离开事件发生冲突了

kkkk6965921kkk 2013-01-20 07:38:10

/*鼠标经过降低增加透明度离开降低透明度*/
$(document).ready(function(){

$('.header_s_li ul li').hover(function() {

$(this).animate({
opacity:1,
}, 500, function() {
// Animation complete.
});
},function() {

$(this).animate({
opacity:0.3,
}, 100, function() {
// Animation complete.
});
});
});
/*鼠标点击降低增加透明度离开不降低透明度*/
$(document).ready(function(){

$('.header_s_li ul li').click(function() {

$(this).animate({
opacity:1,
}, 200, function() {
$('.header_s_li ul li').not(this).animate({
opacity:0.3,
});
});
},function() {

$(this).animate({
opacity:1,
}, 100, function() {
// Animation complete.
});
});
});

现在是点击离开也降低透明度了

...全文

680 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

kkkk6965921kkk 2013-01-21

打赏
举报

看来只能通过这样的方法取消鼠标经过绑定了

jsgysyd 2013-01-20

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        /*鼠标经过增加透明度 离开降低透明度*/
        $(document).ready(function () {
            $('.header_s_li ul li').bind("mouseenter", function () {
                $("#divInfo").html($("#divInfo").html() + "1");
                $(this).unbind("mouseleave").bind("mouseleave", function () {
                    $(this).animate({
                        opacity: 1
                    }, 500, function () {
                        // Animation complete.
                    });
                });
                $(this).animate({
                    opacity: 0.3
                }, 500, function () {
                    // Animation complete.
                });

            });
        });
        /*鼠标点击降低增加透明度 离开不降低透明度*/
        $(document).ready(function () {
            $('.header_s_li ul li').bind("click", function () {
                $(this).animate({
                    opacity: 0.3
                }, 500, function () {
                    // Animation complete.
                });
                $(this).unbind("mouseleave");
            });
        });
    </script>
</head>
<body>
    <div id="divInfo">
    </div>
    <div class="header_s_li">
        <ul>
            <li style="background-color: Black; line-height: 32px; color: White;">
                <div>
                    <p>
                        鼠标经过增加透明度 离开降低透明度</p>
                    <p>
                        鼠标点击增加透明度 离开不降低透明度</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>