How to animate divs when they move to fill empty space left by other divs that fade out
Date : March 29 2020, 07:55 AM
hop of those help? I have a set of divs, each corresponds to a set of categories. When I click on a filter, this will change the classes of the divs and make them vissible or hidden depending on those categories. I control how the divs fade in/out and they do it slow and nicely but everytime the divs disappear the ones that are left unchanged move abruptly to fill the empty space left by the ones that were hidden. , I'd suggest using animate() in place of fadeOut(): $('div').click(
function() {
$(this).animate({
'height': 0,
'opacity': 0
}, 750, function() {
$(this).remove();
});
});
.item{
/* other css removed for brevity */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
.hidden {
width: 0; /* reset everything that might affect the size/visibility */
height: 0;
padding: 0;
margin: 0;
opacity: 0;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}
// content animate
$('#work-container > div[class*=hidden]').addClass('hidden');
return false;
|
On div hover animate the hovered div from left to right off screen and animate new divs from left to right that were hid
Tag : jquery , By : user143729
Date : March 29 2020, 07:55 AM
wish helps you With CSS 3 transitions: /* out of view on hover */
.container:hover .hoverMe{
margin-left: -200px;
}
/* bring other DIVS inside view when mouse is over container */
.container:hover ~ .slidingOne{
margin-left: 0;
}
.hoverMe, .slidingOne{
transition: margin 1s;
}
.slidingOne{
margin-left: -200px;
}
<div class="container">
<div class="hoverMe">
...
</div>
</div>
<div class="slidingOne">
...
</div>
<div class="slidingOne">
...
</div>
|
How to animate float:left divs?
Tag : jquery , By : Patastroph
Date : March 29 2020, 07:55 AM
around this issue I'm not sure I fully understand you but my guess was that: http://jsfiddle.net/QvCyx/ $('#contrast').click(function () {
var w = $('#contrastSlider').width();
$('#contrastSlider').toggle("slide", 300);
$('#about').animate({
'margin-left': -w
}, 300, function () {
this.style.marginLeft = 0;
});
});
$('#contrast').click(function () {
var cs = $('#contrastSlider'),
w = cs.width();
if (!cs.is(':visible')) {
$('#about').css('margin-left',-w);
w = 0;
}
cs.toggle("slide", 300);
$('#about').animate({
'margin-left': -w
}, 300, function () {
this.style.marginLeft = 0;
});
});
$('#container').on('click', '.slideTriggerer', function () {
var that = $(this),
sliderA = that.siblings('.slideA'),
sliderB = that.siblings('.slideB'),
defml = parseInt( sliderB.css('margin-left') ),
w = sliderA.outerWidth();
if (!sliderA.is(':visible')) {
sliderB.css('margin-left', -w+defml);
w = defml;
}
sliderB.animate({
'margin-left': -w+defml
}, 300, function () {
sliderB.css('margin-left', defml);
});
sliderA.toggle("slide", 300);
});
|
Animate two divs left side
Date : March 29 2020, 07:55 AM
it should still fix some issue A div is added to wrap socialtext and socailicons, so that they can be moved together easily. HTML <div id="footer">
<div id="wrapper">
<div class="socialtext">Follow us</div>
<div class="socailicons">
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
</div>
</div>
</div>
#footer {
width: 300px;
border: 1px solid #FF0000;
height: 35px;
overflow: hidden; /* hide the div that is out of the border */
}
#wrapper {
position: relative;
right: -200px; /* move it to the right so that
.socialicons is out of the border */
}
.socialtext {
width: 100px;
display: inline-block;
}
.socailicons {
display: inline;
}
.icon {
width: 10px;
height: 10px;
background: none repeat scroll 0 0 #0769AD;
display: inline-block;
margin: 10px;
}
$(document).ready(function() {
var isShown = false;
$('.socialtext').click(function() {
// toggle moving left and right
var offset = isShown? "-=200px": "+=200px";
isShown = !isShown;
$('#wrapper').animate({"right": offset}, 1000);
});
});
|
How to animate a div over other divs if float left is enabled?
Date : March 29 2020, 07:55 AM
should help you out Basically, I have a parent div with a width of 100%, and 3 sub-divs with a width of 33.333333% each. All 3 divs are floated left so they align in one row. $(".thirdwidth").on("click", function(){
$(this).toggleClass("active");
});
html, body{margin:0; height:100%;}
.thirdwidth {
position:absolute;
z-index:0;
top:0;
width: 33.333%;
height: 100%;
transition: 0.4s; -webkit-transition: 0.4s;
}
.thirdwidth.push0{left:0%;}
.thirdwidth.push1{left:33.333%;}
.thirdwidth.push2{left:66.333%;}
#history {background:red;}
#now {background:green;}
#whatwedo{background:blue;}
.thirdwidth.active{z-index:1; left:0; width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullwidth">
<div id="history" class="thirdwidth push0">
<h1>Our History</h1>
click to maximize, and click again to minimize
</div>
<div id="now" class="thirdwidth push1">
<h1>Now</h1>
</div>
<div id="whatwedo" class="thirdwidth push2">
<h1>What We Do</h1>
</div>
</div>
|
Boards Message :
Related QUESTIONS :