0

我有点卡住了。所以在背景图像上悬停时会变大。但是如果我在那个图像上放一个文本，那么动画就不能很好地工作。让我给你看我的代码

HTML

<div class="resize">
    <a id="apply" href="" target="_blank">
        <!--<h1 class="grow">Search & Apply</h1>-->
        <img class="title" src="images/search_inactive1.png">
    </a>
</div>

jQuery

$('.title').hover(function(){
    $(this).animate({ width: "+=40",height: "+=40",top: "-=20",left: "-=20"}, 130);                             
}, 
function(){
    $(this).animate({ width: "-=40",height: "-=40",top: "+=20",left: "+=20"}, 200);                      
});

CSS

.resize img {
    position: relative;
    width: 110px;
}

有什么方法可以告诉 jquery 不要为文本设置动画，而只为背景图像设置动画。

提前致谢。

JSfiddle 链接http://jsfiddle.net/jHeDQ/3/

4

2 回答 2

1

将您的选择器设置在容器上，而不是单独设置图像，因为文本位于其上方，

$('.resize)

代替

$('.title')

Js小提琴

==== 编辑====

为了进一步说明，使用 .stop() 方法是为了避免每次鼠标进入和退出时播放动画都会导致“中断”动画。

.find() 方法用于查找类为 .title 的孩子。

于 2013-07-12T11:29:24.713 回答
0

或者您可以删除 JavaScript（如果您不需要 IE<=8 支持）并使用 css 转换，例如：

.resize .title { 
    position: relative; 
    width: 110px; 
    transition: all .3s ease-out;
    transform-origin: 50% 50%;
}
.resize:hover .title { transform: scale(1.3); }

完整的小提琴示例在这里

于 2013-07-12T11:57:36.173 回答