我有这个网站正在设计,我尝试使用mootools 1.31动画一些div盒子,当点击或鼠标悬停时,显示内容.事情是,它似乎没有在网页上工作,但如果我在空白网页上尝试相同的脚本它可以工作,我想可能是因为我在同一页面上有Jquery 1.52并且可能两个脚本都相互冲突其他因为,如果我删除Jquery,Mootools工作.什么应该是我的选择,因为我需要Jquery为我做一些验证,所以我不能完全删除它.
这是代码
<script>
//-vertical
var mySlide = new Fx.Slide('test');
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});
</script>
Run Code Online (Sandbox Code Playgroud)
这是HTML
<html>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a> |
<a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">
toggle</a> | <a id="hide" href="#">hide</a>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
Run Code Online (Sandbox Code Playgroud)
这是CSS
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
Run Code Online (Sandbox Code Playgroud)
我在他们自己的例子中使用了Mootools提供的完全相同的代码,如果我在一个空白的网页上这样做,但它可以合并到我自己的网页中,它没有,我自己的页面只有Jquery的脚本标签HTML的头部分.
的$功能/对象是存在于这两个库(MooTools的和jQuery).如果你想同时使用它们,你将不得不使用其中一个使用库名:例如,jQuery('slideout').addEvent(...而不是$('slideout').addEvent(...
有用的链接:
| 归档时间: |
|
| 查看次数: |
176 次 |
| 最近记录: |