从显示在另一个div中的div中动画内容

Question

jquery非常新，所以任何帮助都会对它表示赞赏。

试图解决设计难题。在第三个元素悬停时，我需要在另一个div中显示来自div的内容。找到了一些代码，帮助我把它放在一起，但我想知道是否有一种方法来动画(滑动，fadein，等等)。显示时的内容。

知道当.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

下面是fadeIn fadeOut对悬停和鼠标悬停的影响

检查一下这把小提琴

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-使用悬停函数代替挂载器和离开

​

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

​