How to slide down a div then .fadeIn() the content and vice versa?
Goal
When a user clicks the button, the div in question will:
When the user clicks the button again, the div will:
Current position
Here is an example where the fadeIn and fadeOut is happening at the right time but there is no slide effect before and after the fadeIn and fadeOut respectively
http://jsfiddle.net/tkRGU/1/
Also there is this option which has the slideToggle function but does not have the fadeIn and fadeOut occuring after and before the slide respectively.
http://jsfiddle.net/MY8DD/7/
This will work:
HTML:
<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
<div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor erat, et consectetur nisl. Nunc non placerat odio. Cras feugiat pulvinar diam sed sollicitudin. Quisque ut elit lacus, et gravida nunc. Maecenas ac enim ligula. Aenean felis nunc, vulputate pellentesque vehicula nec, tristique a tortor. Curabitur et semper dui. Sed id nisl turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu tempor vehicula. Vivamus dui ligula, ultricies id egestas ut, rhoncus et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris nulla lectus, laoreet sit amet cursus vel, ultricies at enim. Sed facilisis rutrum eros, nec malesuada eros iaculis ac.
<br /><br />
In consectetur faucibus fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nunc magna, vestibulum eget pulvinar hendrerit, tincidunt id arcu. Nullam dolor ligula, suscipit placerat condimentum ac, feugiat ut mauris. Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum massa vel erat tristique congue. Donec vel mi quam, ac iaculis odio. Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas mauris. Sed in massa quis erat venenatis aliquam.
</div>
</div>
Javascript:
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").animate(
{
opacity: "0"
},
600,
function(){
$("#panelThatSlides").slideUp();
}
);
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").animate(
{
opacity: "1"
},
600
);
});
}
}
Working example on JS Fiddle.
For IE just make sure there is a background color behind the content for cleartype.
It sounds like since you want the two operations to occur simultaneously that you should use the animate function. Otherwise the actions will come one after another.
If you know the height of the element before running it, then you can set things fairly easily. Here's an extremely rough example: http://jsfiddle.net/tArQu/
$("#button").toggle(function(){
$("#content").slideDown().fadeIn();
}, function(){
$("#content").slideUp().fadeOut();
return false;
});
那你在追求什么？
链接地址: http://www.djcxy.com/p/21384.html上一篇: FadeIn，FadeOut回调