JQuery UI: Combining Blind and Fading Effects

Question

I'm not even sure that this is possible, but I want to combine the blind and disappear.

Fade works by changing the opacity of the element, and blind, I think, by changing the width / height.

My goal is to create an animation in which the edge of the element will disappear on the screen, otherwise the combination of the blind will disappear. I do not know if there is a term for this.

But anyway, is it possible to do this, and if so, how?

Answer 1

, , , 1 , , . , .

"".

Answer 2

$("#box").animate({height:'0',opacity:'0'}, { complete: function() {this.remove()} });

?

Answer 3

, , jquery/jqueryui, :

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .fadeOut(1500)
    .dequeue();

, .dequeue():

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .hide("slide", { direction: "left" }, 1500)
    .fadeOut(1500)
    .dequeue()
    .dequeue();

"" . jsfiddle demo:

http://jsfiddle.net/DirectCtrl/rVp35/1/

Answer 4

jQuery animate(). CSS ( , , ) . , , .

, , IE "opacity: value"; .

Answer 5

The easiest way to achieve this is to use the jQuery user interface and toggleClass or addClass . What these functions perform is animated from one class to another, so essentially you just define the initial state and final state, and the functions take care of the rest.

Hope this helps!

click here for violin

CSS

---

.divHidden{
    height: 150px;
    opacity: 0.0;
    width: 0px; /*Set to 0 so div is not visible */
    overflow: hidden;
    background: yellow;
}

.divShown{
    opacity: 1.0;
    width: 100px;
}

HTML

---

<button>Click me</button>
<div id="test" class="divHidden">Testing</div>

Javascript

---

$('button').click(function(){
    $('#test').addClass('divShown', 2000);
});