logo标签列表

如何在Javascript中缓慢隐藏div

javascriptjqueryhtmlcss
6
我有两个 div，当我点击按钮关闭第一个 div 时，第二个 div 会向上移动，我希望这个过程缓慢进行。我尝试使用过渡效果，但无法做到。请问有什么帮助吗？先谢谢了。 fiddle
从回答的数量可以看出，这是一个受欢迎且易于找到信息的问题 - 在使用Stack Overflow之前，请先尝试使用Google搜索 - 我通过首先在Google中输入您的问题而找到了25篇不同的文章！ :-P - 顺便说一句，我不是你的-1，但这可能就是你没有得到答案的原因！！！ - GrahamTheDevRel
http://jsfiddle.net/ssZXA/190/ - vivek_nk
我已经更新了我的答案，因为您还想缓慢移动另一个div。 - Jayesh Goyani
我不知道为什么，但我在谷歌上真的没有找到它，所以我在这里问了。这是我的错吗？:P - Atif Azad
9个回答
13
8

使用fadeOut函数

$( "#closebutton" ).click(function(event)
 {
    $("#notice").fadeOut('slow');  //OR fadeOut('10000') time is in milliseconds
 });

Jsfiddle

4

使用

  $("#notice").slideToggle();

或者
 $("#notice").fadeOut();

代替
 $("#notice").hide();
2

请尝试这个：

$("#notice").hide("slow");

谢谢。
1

只需这样做：

$("#notice").hide('fade');

or 

$("#notice").hide('slideUp');

替换为 $("#notice").hide();

演示

好的，现在很好了，但我也希望第二个 div 移动得慢一些。 - Atif Azad
1
尝试使用这个。
<body>
  <div id="myDiv" style="width:200px;height:150px;background-color:red;">
  This is the div that will fade out, slide up, then be removed from the DOM.
  </div>
  <input id="myButton" type="button" value="Fade" />
</body>

$(function() {
     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){
             $(this).slideUp("slow", function() {
                 $(this).remove();
             });
         });

     });
});

演示

1

只需在hide函数上应用slow，我将您的代码自定义如下：

$("#closebutton").button({
    icons: {
        primary: "ui-icon-close"
    },
    text: false
}).click(function(event) {
    $("#notice").hide("slow");
});

参考LIVE DEMO

1
    $("#notice").hide('fade','slow');

DEMO

或

 $("#notice").hide('fade',5000);

5000- 表示隐藏需要5秒钟，你可以设置任何数值。

语法： $("选择器").hide('类型',时间);

0
$(function(){

    $(this).html('&laquo;'); 

    $('.slider-arrow').click(function(){    

        var x = $(".slider-arrow").offset();
        if (x.left == "308") 
        {     
            $( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
        }
        else
        {
            $( ".slider-arrow, .panel").animate({left: "+=300"}, 700);    
        }
    });    
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接