jQuery在悬停时调整div盒子的大小 [英] jQuery resize div box at hover

问题描述

我有两部分代码，要做3件事：

• 一次调整大小只有6个.boxes div （带有文本内容）


• 使透明的.box divs不被选中
  
• 显示隐藏。

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'）; 
}）; 
  

但有些东西是错误的。只有第一个盒子工作得很好，但是当调整大小时，它并不掩盖其他盒子。

你可以在这里看到： jsFiddle

以及我的问题：是否有可能统一此代码并使其有效？ ： - [/ b>

解决方案

你的代码非常混乱。我看起来像你拼凑在一起。不幸的是没有时间为你清理它，所以这里有一些一般的提示：

• 对于一个 .hover（）与绑定 mouseover 和 mouseout 完全相同，so您的箱子不必要地拥有两个处理相同事件的处理程序。您还需要在文档就绪事件中绑定一个，而不是不一致的。


• 您需要添加 stop（）文档，因为您最需要设置clearQueue和jumpToEnd参数。


• 由于您正在浮动这些框，因此这些框会发生变化。使用绝对定位（注​​意它的缺点！）

---

更新：已编辑您的代码： http://jsfiddle.net/Puuxj/7/

我的更改：

• 删除了类 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 both mouseover and mouseout, 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 of mouseover/mouseout.
• Positioned the elements absolute

这篇关于jQuery在悬停时调整div盒子的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！