0

我创建了两个函数，它们允许我将它们与不同的 CSS 类一起使用。

    var CSSElement;
$(document).ready(function(){  


  expandBox (".orange");
  minimizeBox(".orange");

});

function expandBox ($CSSElement){
     //When mouse rolls over  
    $($CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });     
}

function minimizeBox ($CSSElement){
     //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 
}

但是，似乎只有函数 expandBox 有效。如果我将鼠标悬停在 .orange 元素之外，则框不会收缩。

我希望这些动画显示为功能，因为我计划在我的网站中使用它们几次。如果我把我的代码如下：

$(document).ready(function(){  

   //When mouse rolls over  
    $($CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });  

  //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 

});

一切似乎都正常。第一个代码不起作用但第二个代码起作用的原因是什么？

谢谢，

夫纳亚克

4

2 回答 2

3

我猜你打错了：

$($CSSElement)

$(CSSElement)

这就是为什么它不起作用

于 2013-05-12T22:53:27.407 回答
2

在 JavaScript 中，$是标识符中完全合法的字符（而不是说，完全禁止 [像 C 中的那样] 或特殊的印记 [PHP，Perl]）。因此，$CSSElement是一个不同的标识符CSSElement- 如果只定义一个，另一个将不起作用。$($CSSElement)并且$(CSSElement)是不同的。

（给变量名加上前缀可能会造成混淆$；在 JavaScript 中，没有它们也可以正常工作。）

这里发生了什么：

  1. 这两个函数都接受一个名为 的参数$。
  2. expandBox将该参数与$.
  3. minimizeBox使用它而不使用$（因此使用一些不相关的变量）。

我的建议：将所有内容更改为不使用 prefixed $，如下所示：

function expandBox (CSSElement){
     //When mouse rolls over  
    $(CSSElement).mouseover(function(){  
        $(this).stop().animate({height:'485px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    });     
}

function minimizeBox (CSSElement){
     //When mouse is removed  
    $(CSSElement).mouseout(function(){  
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
    }); 
}
于 2013-05-12T23:01:23.273 回答