如果Jquery和Mootools都用在网页上，通常会发生冲突吗？

发布于 2024-12-17 07:52:24 字数 1960 浏览 3 评论 0原文

我正在设计这个网站，我尝试使用 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 的 script 标签放在 HTML 的 head 部分即可。

原文

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.

分享到QQ

分享到微博