Fadein，使用jquery将淡出事件合并在一起_Jquery_Html_Css

Fadein，使用jquery将淡出事件合并在一起

jquery html css

Fadein，使用jquery将淡出事件合并在一起,jquery,html,css,Jquery,Html,Css,我希望淡入淡出事件对所有div单独工作，但当我的鼠标进入第一个div时，它会影响所有其他div。如果我不单独定义demo和demo1函数，则其工作正常，否则它会这样工作。我不明白是什么错了 <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></sc

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

<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>


淡出示例






$（文档）.ready（函数（）{
$（“#div1”）.bind（“mouseenter”，（demo））；
$（“#div1”）.bind（“mouseleave”，demo1））；
$（“#div2”）.bind（“mouseenter”，“demo”）；
$（“#div2”）.bind（“mouseleave”（演示1））；
$（“#div3”）.bind（“mouseenter”，（demo））；
$（“#div3”）.bind（“mouseleave”（演示1））；
});
函数demo（）
{
$（“#div1”）.css（“背景色”、“浅绿色”）.fadeOut（）；
$（“#div2”）.fadeOut（）；
$（“#div3”）.fadeOut（）；
}
函数demo1（）{
$（“#div1”）.css（“背景色”、“红色”）.fadeIn（）；
$（“#div2”）.fadeIn（）；
$（“#div3”）.fadeIn（）；
}

这可能会帮助你@Priyanka Maurya

$(document).ready(function(){

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

});

@Harish的javascript是正确的解决方案，但您将继续看到的问题与display属性有关

fadeOut（）

在动画结束时将elements

display

值设置为none，这意味着您的块将回流，鼠标将离开当前块并进入当前块

您需要保留空间，以便整个元素不会折叠以获得所需的效果


淡出示例






$（文档）.ready（函数（）{
$（“#div1”）。单击（demo（））；
$（“#div2”）。单击（demo2（））；
$（“#div3”）。单击（demo3（））；
});
函数demo（）
{
$（“#div1”）.mouseenter（函数（）{
$（“#div1”）.css（“背景色”、“浅绿色”）.fadeOut（）；
});
$（“#div1”）.mouseleave（函数（）{
$（“#div1”）.css（“背景色”、“红色”）.fadeIn（）；
});
}
函数demo2（）
{
$（“#div2”）.mouseenter（函数（）{
$（“#div2”）.fadeOut（）；
});
$（“#div2”）.mouseleave（函数（）{
$（“#div2”）.fadeIn（）；
});
}
函数demo3（）
{
$（“#div3”）.mouseenter（函数（）{
$（“#div3”）.fadeOut（）；
});
$（“#div3”）.mouseleave（函数（）{
$（“#div3”）.fadeIn（）；
});
}

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

功能演示（id）
{
如果（id==1）{
$（“#div”+id）.css（“背景色”，“浅绿色”）.fadeTo（'slow'，0）；
}如果（id！=1），则为else{
$（“#div”+id）.fadeTo（'slow'，0）；
}
}
函数demo1（id）{
如果（id==1）{
$（“#div”+id）.css（“背景色”，“红色”）.fadeTo（'slow'，1）；
}如果（id！=1），则为else{
$（“#div”+id）.fadeTo（'slow'，1）；
}
}


.fade{显示：块；}


淡出示例

HTML内部

。。真的吗？：）这是在发布时出错的…：（您的代码显示全部淡出3或全部淡入3。如果这不是您想要的，请不要将其放入。Ben-我如何更正此问题？\n您的要求是“在鼠标输入时，该div仅显示fadein，其他div应淡出”正确吗？是的…一次效果应该只对一个div…淡入和淡出。好的，明白了，答案被修改了。你给出的答案不合适，如果有100个div，你会怎么做。因此代码应该像上面一样通用。我不希望第二和第三个div使用css背景红色。我正在尝试这样做在我的问题中。在你点击事件中，你想要mouseenter和mouseleave吗？不给点击事件它不带演示功能…但不点击也会执行这些功能。你只需要在div上做鼠标输入和鼠标输出。这就是我想要的。告诉你是否有可能不使用点击事件。问题是，当你用鼠标输入r该div正在淡出并更改为显示无。因此下面的div正在上升。（即填充顶部div的区域）。相反，您可以使用css不透明度。是的，我知道第二个div取代了第一个div。我如何使用不透明度？意味着第一个div如何保持其位置并隐藏自己并再次可见？

<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>