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，最简单的幻灯片是Up和Down，因为它们是内置的。

我在当前服务详细信息容器中添加了一个div，因此在将内容滑入/滑出时不会影响容器的大小

这就是我更新每个鼠标悬停功能的方法：

import urllib
import re

symbolfile = open("C:/Users/your_path/Desktop/symbols/amex.txt")
symbollist = symbolfile.read()

newsymbolslist = symbollist.split("\n")

i=0
while i<len(newsymbolslist):
    url = "http://finance.yahoo.com/q?s=" + newsymbolslist[i] + "&ql=1"
    htmlfile = urllib.urlopen(url)
    htmltext = htmlfile.read()
    regex = '<span id="yfs_l84_' + newsymbolslist[i] + '">(.+?)</span>'
    pattern = re.compile(regex)
    price = re.findall(pattern,htmltext)
    print "the price of ", newsymbolslist[i] , "is", price[0]
    i+=1

# Make sure you place the 'amex.txt' file in 'C:\Python27\'

这是一个更新的小提琴： https://jsfiddle.net/g66aa0oo/

如果需要进一步解释，请告诉我。

另见：https://api.jquery.com/slideUp/

如果您真的想要左/右滑动，我建议您查看旋转木马效果插件，例如slick

在悬停不同元素时滑动动态文本

1 个答案: