JQuery animieren und Fade-Effekt zusammen

Question

I belebtes Element oben und fadeOut Wirkung zusammen

$('.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); 

hier verwenden möchten ist 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> 

ich meinen Text-Anim-Zentrum div wollen postioned werden auf meine Bilder mit Fade-Effekt, und wenn Sie mit einer Undurchsichtigkeit Hintergrund

 <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> 

helfen könnte 210
• Ich möchte meinen Text-Anim-Zentrum div auf meine Bilder mit Fade-Effekt postioned werden werden, und wenn Sie mit einer Undurchsichtigkeit Hintergrund

Answer 1

Sie müssen sie ketten helfen könnte:

$('.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); 
    }); 

Nicht sicher wie Ihr DOM aussieht, könnte eine Bearbeitung erfordern. Aber hier ist die Quelle für meine Antwort: https://forum.jquery.com/topic/multiple-simultaneous-animations-on-a-single-element