jQuery在一个页面上与另一个冲突

时间:2013-11-21 22:56:09

标签: javascript jquery html performance jquery-ui

我的jQuery noConflict存在问题。我试图将jQuery打开的页面有一个已经使用noConflict()规则的下拉导航。我可以在页面上使用多个noConlfict来获取不同的动画吗?我将在一个页面上同时运行3个不同的jQuery函数。另外它们工作正常,但一旦在页面上加在一起就会停止工作。下面是需要运行的jQuery之一。有人可以帮我添加noConflict()规则吗?

$(function() {
var current = 1;


var iterate = function(){
    var i = parseInt(current+1);
    var lis = $('#rotmenu').children('li').size();
    if(i>lis) i = 1;
    display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,5000);

$('#rotmenu li').bind('click',function(e){
    clearTimeout(slidetime);
    display($(this));
    e.preventDefault();
});

function display(elem){
    var $this   = elem;
    var repeat  = false;
    if(current == parseInt($this.index() + 1))
        repeat = true;

    if(!repeat)
        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
            $(this).animate({'opacity':'0.7'},700);
        });

    current = parseInt($this.index() + 1);

    var elem = $('a',$this);

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

    var info_elem = elem.next();
    $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
        $('h1',$(this)).html(info_elem.find('.info_heading').html());
        $(this).animate({'left':'0px'},400,'easeInOutQuad');
    });

    $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
        $('p',$(this)).html(info_elem.find('.info_description').html());
        $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
    })
    $('#rot1').prepend(
    $('<img/>',{
        style   :   'opacity:0',
        className : 'bg'
    }).load(
    function(){
        $(this).animate({'opacity':'1'},600);
        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
            $(this).remove();
        });
    }
).attr('src', info_elem.find('.info_image').html())
);
}

});

1 个答案:

答案 0 :(得分:0)

正如@adaneo已经评论过,你总是应该将代码包装到jQuery方法中,但之后你甚至应该使用第一个参数 true 调用noConflict:

$.noConflict(true);

这将从jQuery和$变量中完全删除jQuery并返回一个jQuery对象。您可以使用该返回值将其作为参数提供给您的对象或方法:

function MyFunction($) {
    $(doSomeThing);
}
MyFunction($.noConflict(true));