How to hide div slowly in javascript
Question
I have two div when I click button to close the div . second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance. fiddle
9 answers
solution1
6 ACCPTED 2014-04-24 07:03:01
http://jsfiddle.net/ssZXA/185/
read the documentation about .hide() the first argument is "duration"
You can use $("#notice").hide('slow');
solution2
3 2014-04-24 07:00:34
Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();
solution3
3 2014-04-24 07:02:33
use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
solution4
2 2014-04-24 07:13:47
Plz try this:
$("#notice").hide("slow");
Thanks.
solution5
1 2014-04-24 06:58:34
Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
solution6
1 2014-04-24 07:02:04
Try with this.
<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();
});
});
});
});
solution7
1 2014-04-24 07:02:28
$("#notice").hide('fade','slow');
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax: $("selector").hide('type',time);
solution8
1 2014-04-24 07:05:05
Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO
solution9
0 2016-07-29 22:39:51
$(function(){
$(this).html('«');
$('.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);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.