Question

我正在设计这个网站，我尝试使用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提供的完全相同的代码，如果我在一个空白的网页上这样做，它可以合并到我自己的网页中，它没有，我自己的页面只有脚本标签在HTML的head部分中使用Jquery。

Answer 1

两个库（MooTools和jQuery）中都存在$函数/对象。如果要同时使用它们，则必须使用其中一个使用库名称：例如jQuery('slideout').addEvent(...代替$('slideout').addEvent(...

有用的链接：

如果在网页上使用两者，Jquery和Mootools通常会有冲突吗？

1 个答案: