выбрать это и DIV внутри этой

Question

у меня есть две дивы, как это:

<div class="square"> 

    <div class="head"> 
     <span>material</span> 
    </div> 

</div> 

по щелчку на квадратный DIV я хочу, чтобы анимировать:

$('.square').click(function(){ 
    $(this), $(this).find('div').animate({ 
     width: "700px" 
    }, 1500); 


    }); 

Я имею в виду, я хочу, чтобы анимировать и другое: это и div внутри этого. Я не хочу выбирать второй div с классом или id. Я также пробовал функцию() {($ (это), $ (это) .find ('DIV'). Анимировать , но это бесполезно.

предложения?

Answer 1

Использование add объединить матчи:

$('.square').click(function(){ 
    $(this).add($(this).find('div')).animate({ 
     width: "700px" 
    }, 1500); 
}); 

За кулисами объекты JQuery просто массивы. Это добавит результат поиска соответствия в элемент this, а затем применит анимацию к обоим.

Вы также можете использовать addBack() повторно включить предыдущий Jquery контекст (предыдущее значение в стеке обхода): http://api.jquery.com/addback/

$('.square').click(function(){ 
    $(this).find('div').addBack().animate({ 
     width: "700px" 
    }, 1500); 
}); 

Answer 2

попробовать этот

$('.square').click(function(){ 

$(this).children('div').animate({ 
    width: "700px" 
}, 1500); 

}); 

Answer 3

.

Вместо того, чтобы пытаться выбрать один из двух различных элементов и анимировать их обоих, попробуйте дать все элементы, которые вы хотите анимированный то же имя класса, а затем .find() что и анимировать

Итак, ваш HTML будет:

<div class="square animate-me"> 

    <div class="head animate-me"> 
     <span>material</span> 
    </div> 

</div> 

и ваш Jquery будет:

$('.square').click(function(){ 
    $(this).find('.animate-me').animate({ 
     width: '700px' 
    }, 1500); 
});