添加另一个js效果时,多个效果jquery插件冲突

时间:2015-06-04 05:09:45

标签: jquery jquery-plugins conflict

我有一个问题我正在使用多个JQuery插件来实现有魅力但同时添加另一个插件的效果。当新添加的插件工作时,其余效果不起作用。这是我面临的一种新型问题。我需要帮助。谢谢你的回答,评论和批评。

这是我目前正在使用的示例列表

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- Header-change by background -->
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.catslider.js"></script>
<script>
var nodes = document.querySelectorAll('.logo-over li'),
    _nodes = [].slice.call(nodes, 0);
var getDirection = function(ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
    return d;
};
var addClass = function(ev, obj, state) {
    var direction = getDirection(ev, obj),
        class_suffix = "";
    obj.className = "";
    switch (direction) {
        case 0:
            class_suffix = '-top';
            break;
        case 1:
            class_suffix = '-right';
            break;
        case 2:
            class_suffix = '-bottom';
            break;
        case 3:
            class_suffix = '-left';
            break;
    }
    obj.classList.add(state + class_suffix);
};
// bind events
_nodes.forEach(function(el) {
    el.addEventListener('mouseover', function(ev) {
        addClass(ev, this, 'in');
    }, false);
    el.addEventListener('mouseout', function(ev) {
        addClass(ev, this, 'out');
    }, false);
});
$(function() {

    $('#mi-slider').catslider();

});
var $head = $('#ha-header');
$('.ha-waypoint').each(function(i) {
    var $el = $(this),
        animClassDown = $el.data('animateDown'),
        animClassUp = $el.data('animateUp');

    $el.waypoint(function(direction) {
        if (direction === 'down' && animClassDown) {
            $head.attr('class', 'ha-header ' + animClassDown);
        } else if (direction === 'up' && animClassUp) {
            $head.attr('class', 'ha-header ' + animClassUp);
        }
    }, {
        offset: '100%'
    });
});
/*Nav-line follow*/
$(function() {
    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#navigation").append("<li id='magic-line'></li>");
    /* Cache it */
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".active").width())
        .css("left", $(".active a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#navigation > li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});
//form
jQuery(document).ready(function($) {
    if ($('.floating-labels').length > 0) floatLabels();

    function floatLabels() {
        var inputFields = $('.floating-labels .cd-label').next();
        inputFields.each(function() {
            var singleInput = $(this);
            //check if user is filling one of the form fields 
            checkVal(singleInput);
            singleInput.on('change keyup', function() {
                checkVal(singleInput);
            });
        });
    }

    function checkVal(inputField) {
        (inputField.val() == '') ? inputField.prev('.cd-label').removeClass('float'): inputField.prev('.cd-label').addClass('float');
    }
});
$(window).scroll(function(e) {
    parallax();
});

function parallax() {
    var scrolled = $(window).scrollTop();
    $('.magma').css('top', +(scrolled * 0.6) + 'px');
}
</script>
<script src="js/banner-color-effect/js-color-effect.js"></script>
<script src="js/page-transition.js"></script>

0 个答案:

没有答案