Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2015, 16:22
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Анимация по селектору класса через each
Ребят, моя анимация воспроизводиться сразу на всех блоках, а нужно только на том, на который навели. Подскажите плиз в чем ошибка?
<div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>

                <div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>

                <div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>
                </div>



$("body").find(".GarantAnimatedPlace").each(function(index, element) {
            $(element).hover(
			function(e){
				$(this).find(".GarantAnimatedBlockText").animate({"height":"100%"},300,function(){
						$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"inline-block"}).animate({"opacity":"1"},300)
					})
				},
			function(e){
				$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"none","opacity":"0"})
				$(this).find(".GarantAnimatedBlockText").each(function(index, element) {
                    $(element).animate({"height":$(this).find(".GarantAnimatedBlockTextShow").outerHeight(true)+"px"},300)
                });	
			})
        });
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2015, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Siend
GarantAnimatedPlace
где?
Сообщение от Siend
$("body").find
зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2015, 16:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Siend,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .GarantAnimatedBlock {
      float: left;
      margin: 15px;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
$(".GarantAnimatedBlock").each(function(index, element) {
            $(element).on( {mouseenter :
			function(e){
				$(this).find(".GarantAnimatedBlockText").animate({"height":"100%"},300,function(){
						$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"inline-block"}).animate({"opacity":"1"},300)
					})
				},
		 mouseleave	:function(e){
				$(this).find(".GarantAnimatedBlockTextHidden").css({"display":"none","opacity":"0"})
				$(this).find(".GarantAnimatedBlockText").each(function(index, element) {
                    $(element).animate({"height":$(this).find(".GarantAnimatedBlockTextShow").outerHeight(true)+"px"},300)
                });
			}})

     $(element).mouseleave() //вместо css
});

});


  </script>
</head>

<body>

<div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>
                </div>
                <div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>
               </div>
                <div class="GarantAnimatedBlock">
                    <img src="someimg.png">
                    <div class="GarantAnimatedBlockText">
                        <span class="GarantAnimatedBlockTextShow">
                        <p>sometext</p></span>
                        <span class="GarantAnimatedBlockTextHidden">
                        <p>sometext.</p>
                        <p>sometext</p></span>
                    </div>
                </div>



</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2015, 18:33
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Благодарю)
GarantAnimatedPlace - вокруг всех блоков)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
eMail через JS konstantinopol Общие вопросы Javascript 15 12.01.2015 10:06
$.Class - немогу достучаться до свойства класса Sanu0074 jQuery 1 16.12.2012 20:21
Перенос Name элемента через Jquery titanrat Общие вопросы Javascript 2 05.12.2012 14:20
Передать параметры через HREF в AJAX izcian Общие вопросы Javascript 5 18.08.2012 20:04
XMLHTTPRequest передача имя через POST dds AJAX и COMET 0 14.08.2008 14:44