我有这个网站正在设计,我尝试使用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>这是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>这是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; }我在他们自己的例子中使用了Mootools提供的完全相同的代码,如果我在一个空白的网页上这样做,但它可以合并到我自己的网页中,但它没有,我自己的页面只有Jquery的脚本标签HTML的头部分。
I have this website am designing, i tried using mootools 1.31 to animate some of the div boxes when clicked or when the mouse hover rounds it, to shows the content. the thing is that it doesn't seem to work on the webpage, but if i try the same script on a blank webpage it works, am thinking probably it's because i have Jquery 1.52 on the same page and maybe both scripts are conflicting with each other because, if i remove the Jquery, the Mootools works. What should be my option, because i need the Jquery to do some validations for me, so i can't remove it completely.
Here are the codes
<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>here's the 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>Here's the 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; }Am using the exact same code supplied by Mootools in their own example, if i do this on a blank webpage it works but incorporated into my own webpage, it doesn't, and my own page just have the script tag of the Jquery in the head section of the HTML.
最满意答案
$ function / object存在于两个库(MooTools和jQuery)中。 如果你想同时使用它们,你将不得不使用其中一个使用库名:例如jQuery('slideout').addEvent(...而不是$('slideout').addEvent(...
有用的链接:
http://api.jquery.com/jQuery/ http://docs.jquery.com/Using_jQuery_with_Other_LibrariesThe $ function/object is present in both libraries (MooTools and jQuery). If you want to use both of them you will have to use one of them using library name: e.g. jQuery('slideout').addEvent(... instead of $('slideout').addEvent(...
Useful links:
http://api.jquery.com/jQuery/ http://docs.jquery.com/Using_jQuery_with_Other_Libraries更多推荐
发布评论