Question

I need to call the jquery.animate on a nested div. The div structure is something like this

<div id="jsPlumb_1_4" class="container">
       <div id="PlanItemPL1" class="PlanItem">
            <div id="window1" class="window">
            </div>
        </div>
</div>

I am interested in doing operations such as mousedown event, animate event on the div class window. Can somebody please let me know what selector should I write. Thanks for the help.

Answer 1

I’d suggest, without further specifics in the question, a generic approach:

$('#jsPlumb_1_4').on('mousedown', function(e){
    $(this).find('div.window').animate({'width' : '100px'}, 1000);
});

JS Fiddle demo.

In this demonstration I’m binding the mousedown event to the #jsPlumb_1_4 element (the event will propagate from any of its child elements), and triggering the animate() on the contained div.window element.

To make it a little more interesting, I’m adding a mouseup event too, so that on mousedown the div.window shrinks, and on mouseup it grows:

$('#jsPlumb_1_4').on('mousedown mouseup', function(e){
    var newWidth = e.type == 'mousedown' ? '50%' : '80%';
    $(this).find('div.window').animate({'width' : newWidth}, 1000);
});​

JS Fiddle demo.

e.type retrieves the event (mouseup or mousedown), and the newWidth variable is either 50% or 80% depending on whether the event is equal to mousedown or not.