从另一个div内显示的div动画制作内容

Question

对于jquery来说真的很新颖，所以任何帮助都会对此表示赞赏。

试图解决设计挑战。我需要在另一个div内显示div的内容，悬停第三个元素。 找到了一些帮助我把它放在一起的代码，但是我想知道是否有一种方法在显示时动画（滑动，淡入淡出等）内容。

任何想法如何在显示内容时将动画应用到.html函数？

var divContent = $("#explore-agility-content").html(''); 
$(".industry").hover(
    function() { 
     $("#explore-agility-content").html($(this).find("#shortdesc").html()); 
    }, 
    function() { 
     $("#explore-agility-content").html(divContent); 
    } 
); 

https://jsfiddle.net/rnwebdesigner/3wyrwd92/71/

Answer 1

这里有淡入淡出悬停效果和鼠标移开

检查此琴

https://jsfiddle.net/parthjasani/3wyrwd92/72/

var divContent = $("#explore-agility-content").html(''); 
$(".industry").hover(

    function() { 
     $("#explore-agility-content").html($(this).find("#shortdesc").html()); 
     $("#explore-agility-content .wb").hide().fadeIn() 
    }, 

    function() { 
     $("#explore-agility-content .wb").fadeOut(function() { 
      $("#explore-agility-content").html(divContent); 
     }) 
    } 

); 

Answer 2

您可以添加和删除它可以包含几个属性上的鼠标来进行转换CSS类进入和离开..

请参见下面的代码片段（溶液1）

$('.image').mouseenter(function(){ 
 
     $(".text").addClass("animate") 
 
}); 
 
$('.image').mouseleave(function(){ 
 
      $(".text").removeClass("animate") 
 
});

.image { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    background-color: red; 
 
    
 
} 
 
.text { 
 
    background-color: white; 
 
    padding:40px; 
 
     transition:all 0.5s; 
 
} 
 

 
.left { 
 
     display:block; 
 
     height:400px; 
 
     width: 400px; 
 
     background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll; 
 
    background-color:#0C0C0C; 
 
    background-size: 100% 100%; 
 
     } 
 
.animate{ 
 
    
 
    opacity:1 !important; 
 
    padding-top:50px; 
 

 
} 
 
.noanimate{ 
 
    opacity:0; 
 
    padding-top:-50px 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"></div> 
 
<div class="left"> 
 
      <div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare. 
 
      </div> 
 

 
</div>

解决方案2 - 使用悬停功能，而不是mounseenter离开

$('.image').hover(function(){ 
 
     $(".text").toggleClass("animate") 
 
});

.image { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    background-color: red; 
 
    
 
} 
 
.text { 
 
    background-color: white; 
 
    padding:40px; 
 
     transition:all 0.5s; 
 
} 
 

 
.left { 
 
     display:block; 
 
     height:400px; 
 
     width: 400px; 
 
     background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll; 
 
    background-color:#0C0C0C; 
 
    background-size: 100% 100%; 
 
     } 
 
.animate{ 
 
    
 
    opacity:1 !important; 
 
    padding-top:50px; 
 

 
} 
 
.noanimate{ 
 
    opacity:0; 
 
    padding-top:-50px 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"></div> 
 
<div class="left"> 
 
      <div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare. 
 
      </div> 
 

 
</div>