CODEWITHSUNDEEP
javascriptjqueryopacityslidedown
SilverLight
SilverLight

Reputation: 20468

how can i slideDown A Hidden element from 0 opacity to 1 with jquery

i have a coke like below that using jquery prototype Library:

        new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
        new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })

this code force the imageDataContainer element to sliding Down From 0 Opacity To 1 Opacity.

how can i implement upper codes with new downloaded jquery library from jquery.com web site?

the syntax of slideDown is like this : http://www.w3schools.com/jquery/eff_slidedown.asp

i know how slideDown And fadeTo Functions Work in jquery / but how can i combine them like the upper codes?

i test the below code - but u can not changing the opacity --DURING-- toggle :

          $('#lightbox-container-image-data-box').animate({
            opacity: 0,
            height: 'toggle',
            opacity: 1
          }, 400, function() {
            // Animation complete.
          });

thanks 4 attention

Upvotes: 1

Views: 3426

Answers (1)

ChrisR
ChrisR

Reputation: 14447

Use animate() for that. With animate you can animate any arbitrary number of properties on an element.

Check a demo of the code below here: http://jsfiddle.net/chrisramakers/8ewEp/ 

$('#book').hide();
$('#book').animate({
  opacity: 'toggle',
  height: 'toggle'
});

Upvotes: 4

Related Questions