在懸停其他元素時滑動動態文本

Question

當我將鼠標懸停在假定使用jquery動態更改div的內容的相關項目上時，我突然想到讓div內容滑動。內容只是改變，但我希望他們滑，我嘗試了各種各樣的東西，但徒勞無功。

請原諒，如果我的問題很愚蠢，我是Jquery的新手。

HTML

<div class="servdescripitems"> 
    <h3>Heading 1</h3> 
     <p>Paragraph of first service</p> 
     <ul> 
     <li>Heading 1 list 1</li> 
     <li>Heading 1 list 2</li> 
     </ul> 
    <div class="button">Service 1</div> 
</div> 

<ul class="serviceslist"> 
    <li class="service1"></li> 
    <li class="service2"></li> 
    <li class="service3"></li> 
</ul> 

jQuery的

$('.service1').mouseover(function() { 
    $('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>'); 
}); 

$('.service2').mouseover(function() { 
    $('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>'); 
}); 

$('.service3').mouseover(function() { 
    $('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>'); 
}); 

CSS

.servdescripitems { 
    width: 100%; 
    height: 400px; 
} 
.servdescripitems h3 { 
    text-align: center; 
    font-family: 'Lato', sans-serif; 
    font-weight: bold; 
    font-size: 15pt; 
    color: #ed1f24; 
    margin-bottom: 10px; 

} 

.servdescripitems p { 
    font-family: 'Lato', sans-serif; 
    font-weight: normal; 
    font-size: 12pt; 
    margin-bottom: 15px; 
} 

.servdescripitems ul{ 
    list-style-image: url("../images/servicelist.png"); 
    padding-left: 30px; 
} 

.servdescripitems li { 
    font-family: 'Lato', sans-serif; 
    font-weight: normal; 
    font-size: 12pt; 
    padding-bottom: 5px; 
} 




.button { 
    border-top: 1px solid #7e7e7e; 
    background: #3b363b; 
    background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b)); 
    background: -webkit-linear-gradient(top, #7e7e7e, #3b363b); 
    background: -moz-linear-gradient(top, #7e7e7e, #3b363b); 
    background: -ms-linear-gradient(top, #7e7e7e, #3b363b); 
    background: -o-linear-gradient(top, #7e7e7e, #3b363b); 
    padding: 5px 10px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
    box-shadow: rgba(0,0,0,1) 0 1px 0; 
    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
    color: white; 
    font-family: 'Lato', sans-serif; 
    font-size: 11pt;  
    font-weight: bold; 
    text-decoration: none; 
    text-align: center; 
    width: 150px; 
    height: 20px; 
    margin: 5px auto; 
} 
.button:hover { 
    border-top-color: #ed1f22; 
    background: #ed1f22; 
    color: #ffffff; 
    cursor: pointer; 
    } 
.button:active { 
    border-top-color: #ed1f22; 
    background: #ed1f22; 
    } 

.serviceslist { 
    width: 80%; 
    margin: 0 auto; 
} 


.serviceslist li { 
    margin-bottom: 3px; 
    margin-right: 30px; 
    float: left; 
} 

.service1 { 
    background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0; 
    background-position: 0 0; 
    height: 100px; 
    width: 100px; 
    background-color: #f6f6f6; 
    border: 2px solid #ed1f24; 
    border-radius: 100px; 
    -webkit-transition: all 400ms linear; 
    -moz-transition: all 400ms linear; 
    -o-transition: all 400ms linear; 
    -ms-transition: all 400ms linear; 
    transition: all 400ms linear; 
    cursor: pointer; 
} 



.service2 { 
    height: 100px; 
    width: 100px; 
    background-color: #f6f6f6; 
    border: 2px solid #ed1f24; 
    border-radius: 100px; 
    -webkit-transition: all 400ms linear; 
    -moz-transition: all 400ms linear; 
    -o-transition: all 400ms linear; 
    -ms-transition: all 400ms linear; 
    transition: all 400ms linear; 
    cursor: pointer; 

} 

.service3 { 
    height: 100px; 
    width: 100px; 
    background-color: #f6f6f6; 
    border: 2px solid #ed1f24; 
    border-radius: 100px; 
    -webkit-transition: all 400ms linear; 
    -moz-transition: all 400ms linear; 
    -o-transition: all 400ms linear; 
    -ms-transition: all 400ms linear; 
    transition: all 400ms linear; 
    cursor: pointer; 

} 

我已經擺弄腳本here

Answer 1

與jQuery最簡單的幻燈片了因爲它們是內置的。

我加你目前的服務細節容器內一個div，所以滑動量輸入/輸出

這是多麼我已經更新您的每一個鼠標懸停功能，當容器的大小不會受到影響：

$('.service1').mouseover (function() { 
    //check if current service shown is not the same - this avoids sliding to same content 
    if(inside_div.attr("current-service")!="1"){ 
    //slideUp current content 
    inside_div.slideUp(function(){ 
     //once slideUp is finished, change the content of the inside div... 
      inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>'); 
     // ... then tell the div what service content it now has, and slide it back down 
     inside_div.attr("current-service","1").slideDown(); 
     }); 
    } 
}); 

這裏有一個更新的小提琴： https://jsfiddle.net/g66aa0oo/

讓我知道是否需要任何進一步的解釋。

另請參見：https://api.jquery.com/slideUp/

如果你真的想左/右滑，我建議你在尋找一個旋轉木馬的特效插件，如slick