Trevor Yokum Trevor Yokum - 2 months ago 12
CSS Question

Is there a way to smooth closeby text transitions when using jQuery animations (namely drop)?

I found it a little difficult to word exactly what I was trying to ask, so I just made a fiddle instead. On my website I currently have a button that triggers a jQuery "drop" effect on a hidden div that has some text under it...like so:

<div id="toggle"></div>
<p>Some text under the div</p>


When the drop happens, my text shoots to the position it's supposed to be in rather than smoothly transitioning.

Code snippet:



$(document).click(function() {
$("#toggle").toggle("drop", {
direction: "up"
}, 600);
});

#toggle {
width: 100px;
height: 100px;
background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<p>Some text under the div</p>
</body>





Fiddle: https://jsfiddle.net/42cdxz83/10/

Is there a way to make the text transition/slide smoothly instead of going instantly from one position to the next? Using .slideDown() on the text is awesome, but is obviously tripped up by my "drop" animation. Looking for any way I can stop the jumpy text.

Thanks!

Answer

I think your problem was due to the fact that you were toggling the <div>, which included the paragraph, and expecting both to work separately. Here's an updated JSFiddle with a result I think you'd like: https://jsfiddle.net/42cdxz83/15/

Comments