我想知道是否有人有办法解决我遇到的问题。我对从脚本和测试服务器混合的不同代码进行了很多实验,但它们对我没有帮助,因为我想移动一个转换后的 div,其内部跨度仅在加载时将文本向左对角线一点点移出站点,然后在悬停时移入该站点,但仍然只有一个悬停,所以这个应该移出,同时用鼠标箭头离开热点区域。
我不知道如何将类组合在一个我可能会在加载时调用的函数中。我附上我的 css 和 html,以防有人已经遇到问题。
我想到了一些事情,比如用左边距移动它们到左边,用左边距为右边动画它们!
这是我想出的 jquery,但它并没有做我想要的。它使事物向左/向右直线移动,而不是以我希望它们移动的角度对角线:
<script type="text/javascript">
$(function() {
$('#bgrclub .advantages').hover(
function () {
var $this = $(this);
$this.stop().animate({'margin-left':'400px'},500);
$('#bgrclub .advantages',$this).stop(true,true).fadeOut(1500);
},
function () {
var $this = $(this);
$this.stop().animate({'margin-left':'95px'},1000);
$('#bgrclub .advantages',$this).stop(true,true).fadeIn();
}
);
});
</script>
<div id="bgrclub">
<div class="advantages"><span>A proper solution</span></div>
<div class="advantages"><span>would have to work</span></div>
<div class="advantages"><span>with differently</span></div>
<div class="advantages"><span>long text spand</spa></div>
<div class="advantages"><span style="padding-left:250px;">Random Text Span</span></div>
<div class="advantages"><span style="padding-left:435px;">A really, really, really long text span</span></div>
</div>
CSS:
#bgrclub {background-image:url(../images/club_bgr.jpg);background-repeat:no-repeat;width:755px;height:544px;}
#bgrclub_bottompics {background-image:url(../images/club_bgr_bottompics.jpg); position:absolute; bottom:0px; left:0px;background-repeat:no-repeat;width:755px; height:95px; z-index:999;}
#bgrclub .advantages {position:relative;width:755px;float:left; padding-top:40px;-moz-transform:rotate(-20deg); /* Firefox 3.6 Firefox 4 */-webkit-transform:rotate(-20deg); /* Safari */-o-transform:rotate(-20deg); /* Opera */-ms-transform:rotate(-20deg); /* IE9 */transform:rotate(-20deg); /* W3C */}
#bgrclub .advantages span {font-family: 'Open Sans Condensed', sans-serif;font-size:175%; font-weight:lighter; color:#373737;padding:10px; padding-left:125px; margin-left:-150px; border-bottom-right-radius:10px; border-top-right-radius:20px; z-index:1000;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 23%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(23%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */}