jQueryのアニメーションやフェード効果は一緒

Question

私はanimate要素の上部とフェードアウト効果を使用したい

は一緒にここに

$('.img-animate-cont').mouseover(function(){ 
     $(".text-anim").fadeIn({queue: false, duration: 400}); 
     $(this).find(".text-anim").stop().animate({top:"200px"},400); 
    }); 

    $('.img-animate-cont').mouseout(function(){ 
     $(".text-anim").fadeOut({queue: false, duration: 400}); 
     $(".text-anim").stop().animate({ top: "0" }, 400); 

は、私は私のテキスト・アニメーション・センターのdivがpostionedすることにしたいHTML

<section class="container" id="fourth"> 
      <h2 class="text-center">Latest Products</h2> 
    <div class="row"> 
     <div class="col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="imgLink"> 
      <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
       <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
      </div></a> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5> 
       <a href="#" class="imgLink" id="imgLinkTop1"> 
       <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
        <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
       </div></a> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>   
     </div> 

ですフェード効果を持つ私のイメージの上、あなたが不透明背景

 <div class="col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="imgLink"> 

      <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"> 
         <button type="button" class="btn btn-primary btn-md"><span class=""></span>Add to Cart</button> 
         <br><br><button type="button" class="btn btn-primary btn-md">Quick View</button> 
        </div> 
       <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
      </div></a> 
       <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>        
        <a href="#" class="imgLink" id="imgLinkTop2"> 
        <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
         <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
        </div></a>    
       <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>     
     </div> 
     <div class="col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="imgLink" id="imgLinkTop3"> 
      <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
       <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
      </div> 

      </a> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>         
       <a href="#" class="imgLink" id="imgLinkTop4"> 
       <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
        <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"> 
       </div></a> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>            
     </div> 
     <div class="col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="imgLink"> 
       <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-md><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
       <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"></a> 

       </div> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>        
       <a href="#" class="imgLink" id="imgLinkTop5"> 
        <div class="img-animate-cont"> 
        <div class="text-anim text-center" style="position: relative;top:9%;"><button type="button" class="btn btn-primary btn-xs"><span class=""></span>Add to Cart</button><br><br><button type="button" class="btn btn-primary btn-md">Quick View</button></div> 
        <img src="slider1.jpg" width="100%" height="300px" class="img-respomsive"></a> 

        </div> 
      <h5><a href="#">FIVE MULTICOLOR MACARONS<br></a><a><span>2$</span></a></h5>  
     </div>            
    </div> 
    <div class="row"> 
     <div id="seeAll"><button type="button">See All Products</button></div> 
    </div> 
</section> 

を助けることができれば210
• 私は私のテキスト・アニメーション・センターのdivをフェード効果で自分の画像にpostionedすることが、あなたが不透明背景

Answer 1

を助けることができれば、あなたはそれらをチェーンに必要とします

$('.img-animate-cont').mouseover(function(){ 
     $(".text-anim").fadeIn({queue: false, duration: 400}).animate({top:"200px"},400); 
    }); 

    $('.img-animate-cont').mouseout(function(){ 
     $(".text-anim").fadeOut({queue: false, duration: 400}).animate({ top: "0" }, 400); 
    }); 

わかりませんあなたのDOMのように見えるので、いくつかの編集が必要かもしれません。しかしここに私の答えの源があります： https://forum.jquery.com/topic/multiple-simultaneous-animations-on-a-single-element