Форум

Siend · #1 (**permalink**) 01.10.2015, 16:22

Ребят, моя анимация воспроизводиться сразу на всех блоках, а нужно только на том, на который навели. Подскажите плиз в чем ошибка?

<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

Сообщение от Siend

GarantAnimatedPlace

где?

Сообщение от Siend

$("body").find

зачем?

рони · #3 (**permalink**) 01.10.2015, 16:56

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>

Siend · #4 (**permalink**) 01.10.2015, 18:33

Благодарю)
GarantAnimatedPlace - вокруг всех блоков)

Форум

Справочник

Discord чат

Курсы javascript