问题描述
我有两部分代码,要做3件事:
CODE:
$ b
$ ('.content_area div')。hide();
$ b $(函数(){
$('。box')。bind('mouseover',function(){
$(this).addClass('up' );
$('。box')。not('。up')。fadeTo('normal',0.2);
});
$('。box')。 bind('mouseout',function(){
$('。box')。removeClass('up')。fadeTo('normal',1);
});
} );
initwidth = $('。box')。width();
initHeight = $('。box')。height();
$ b $('。box')。hover(function(){
$(this).children('。more')。show();
$(this ).stop()。animate({width:'220',height:'140'},{queue:false,duration:'fast'})。css('font-size','1.2em'); $ ()。b $ b},function(){
$(this).children('。more')。hide();
$(this).stop()。animate({width:initwidth, height:initHeight},{queue:false,duration:'fast'})。css('font-size','1em');
});
但有些东西是错误的。只有第一个盒子工作得很好,但是当调整大小时,它并不掩盖其他盒子。
你可以在这里看到:
以及我的问题:是否有可能统一此代码并使其有效? : - [/ b>
你的代码非常混乱。我看起来像你拼凑在一起。不幸的是没有时间为你清理它,所以这里有一些一般的提示:
.hover()
与绑定 mouseover
和 mouseout
完全相同,so您的箱子不必要地拥有两个处理相同事件的处理程序。您还需要在文档就绪事件中绑定一个,而不是不一致的。
stop()$ c $因为你排队并继续前进,所以你可以选择调暗和(不)调暗动画。阅读,因为您最需要设置clearQueue和jumpToEnd参数。
更新:已编辑您的代码:
我的更改:
hover
并使用 .not(this)
来代替。 (除非需要其他类的类...)
.stop()
。
mouseenter
/ mouseleave
而不是 mouseover
/ mouseout
。
I've got two parts of code, to make 3 things:
- resize at one time only one of 6 .boxes div (with it's text content)
- make transparent .box divs which aren't selected
- show hidden .more span
CODE:
$('.content_area div').hide();
$(function(){
$('.box').bind('mouseover',function() {
$(this).addClass('up');
$('.box').not('.up').fadeTo('normal',0.2);
});
$('.box').bind('mouseout',function() {
$('.box').removeClass('up').fadeTo('normal',1);
});
});
initwidth = $('.box').width();
initHeight = $('.box').height();
$('.box').hover(function(){
$(this).children('.more').show();
$(this).stop().animate({width: '220', height: '140'},{queue:false, duration:'fast'}).css('font-size', '1.2em');
}, function(){
$(this).children('.more').hide();
$(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:'fast'}).css('font-size', '1em');
});
But somethings is wrong. Only first of the boxes works quite good, but it's does'nt cover up other boxes when is resized.
Effect of it You can see here: jsFiddle
And my question: is it possible, to unify this code and make it works? :-[
Your code is very mixed up. I looks like you pieced it together. Unfortuantly don't have the time to clean it up for you, so here are some general tips:
- For one
.hover()
does exactly the same as binding bothmouseover
andmouseout
, so your boxes unnecessarily have two handlers for the same events. Also you are binding one in the document ready event and the other not, which is inconsistent. - You'll need to add
stop()
s to the dimming and (un)dimming animations because thy queue up and keep going. Read the documention because you'll most likey need to set the clearQueue and jumpToEnd parameters. - The boxes shift because you are floating them. Use absolute positioning instead (watch out for it's disadvantages!)
UPDATE: I've edited your code: http://jsfiddle.net/Puuxj/7/
My changes:
- Removed the class
hover
and used.not(this)
instead. (Unless need the class for something else...) - Added parameters to
.stop()
. - Used
mouseenter
/mouseleave
instead ofmouseover
/mouseout
. - Positioned the elements absolute
这篇关于jQuery在悬停时调整div盒子的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!