Question

我希望所有div分别淡出淡出事件工作但是当我的鼠标进入第一个div时它会影响所有其他div。如果我没有单独定义demo和demo1函数那么它的工作正常，否则它的工作就像这样.I不明白出了什么问题？

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<p>Fade Out Example</p><br>
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px"> </div><br>
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px"> </div><br>
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px"> </div>

</body>

    <script>

$(document).ready(function(){
    $("#div1").bind("mouseenter",(demo));
    $("#div1").bind("mouseleave",(demo1));

        $("#div2").bind("mouseenter",(demo));
        $("#div2").bind("mouseleave",(demo1));

            $("#div3").bind("mouseenter",(demo));   
                $("#div3").bind("mouseleave",(demo1));
    });
function demo()
{
$("#div1").css("background-color","lightgreen").fadeOut();
$("#div2").fadeOut();
$("#div3").fadeOut();
}
function demo1(){
    $("#div1").css("background-color","red").fadeIn();
        $("#div2").fadeIn();
            $("#div3").fadeIn();
}
    </script>
</html>

Answer 1

使用fadeTo，它不会删除DOM中的div元素;在代码段中运行它

＆＃13;

    function demo(id)
    {
        if(id == 1){
            $("#div"+id).css("background-color","lightgreen").fadeTo('slow',0);
        }else if(id != 1){
            $("#div"+id).fadeTo('slow',0);
        }
    }
    function demo1(id){
        if(id == 1){
            $("#div"+id).css("background-color","red").fadeTo('slow',1);
        }else if(id != 1){
            $("#div"+id).fadeTo('slow',1);
        }
    }

＆＃13;

<style>
    .fade{display: block;}
</style>

＆＃13;

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<p>Fade Out Example</p><br>
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px" onmouseover="demo('1');" onmouseout="demo1('1')"> </div><br>
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px" onmouseover="demo('2');" onmouseout="demo1('2')"> </div><br>
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px" onmouseover="demo('3');" onmouseout="demo1('3')"> </div>

</body>


</html>

＆＃13;

Answer 2

这可能会帮助你@Priyanka Maurya，

$(document).ready(function(){

    $('div.fade').mouseenter(function(){
        $(this).animate({
        opacity: '0.2'
    },1500);  
    });
    $('div.fade').mouseleave(function(){
        $(this).animate({
        opacity: '1'
    },1500);
    });

});

Answer 3

@Harish的javascript是正确的解决方案，但您将继续看到的问题与display属性有关。 fadeOut()在动画结束时将元素display值设置为无，这意味着您的块将重排并且鼠标离开当前块并进入正在执行的块。

您需要保留空间，以便整个元素不会折叠以获得您正在寻找的效果。

http://api.jquery.com/fadeout/#entry-longdesc

Answer 4

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<p>Fade Out Example</p><br>
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px"> </div><br>
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px"> </div><br>
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px"> </div>

</body>
<script>

$(document).ready(function(){
    $("#div1").click(demo());
    $("#div2").click(demo2());
    $("#div3").click(demo3());
    });

function demo()
{
$("#div1").mouseenter(function(){
        $("#div1").css("background-color","lightgreen").fadeOut();
    });
    $("#div1").mouseleave(function(){
$("#div1").css("background-color","red").fadeIn();
});
}
function demo2()
{
$("#div2").mouseenter(function(){
        $("#div2").fadeOut();
    });
    $("#div2").mouseleave(function(){
$("#div2").fadeIn();
});
}
function demo3()
{
$("#div3").mouseenter(function(){
        $("#div3").fadeOut();
    });
    $("#div3").mouseleave(function(){
$("#div3").fadeIn();
});
}

    </script>
</html>

Fadein，Fadeout事件一起使用jquery

4 个答案: