0
Я создал скользящий контент, меню вверху, которое вы нажимаете, и содержимое ниже слайдов до следующего «li».скользящий div внутри другого slidng div
В последней ссылке в главном меню «сменные фильтры» есть еще один раздвижной контент внутри него.
, похоже, тормозит со второй системой, находящейся в первичной обмотке.
JS скрипку:
https://jsfiddle.net/ph3ng2fo/30/
Сценарий:
var isTabSelected = false;
var lastSelectedTabLeftPos;
$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
$(".tab_item").mouseout(function() {
if(isTabSelected){
$(".moving_bg").stop().animate({
left: ""+lastSelectedTabLeftPos
}, { duration: 300 });
}else
{
$(".moving_bg").stop().animate({
left: "0"
}, { duration: 300 });
}
});
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});
//Slide Content
var TabbedContent = {
current: {i:null, obj:null},
init: function() {
$(".tab_item").click(function() {
$(".tab_item").removeClass("tab_item_color");
$(this).addClass("tab_item_color");
var $this = $(this);
TabbedContent.slideContent($this);
});
TabbedContent.current.i = 0;
TabbedContent.current.obj = $(".tabslider li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.closest(".tabbed_content"),
$contentContainer = $('.bodymainMaxS'),
$tabslider = $contentContainer.find(".tabslider");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent.current.obj)).show();
var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 400);
TabbedContent.current.i = i;
TabbedContent.current.obj = $new;
}
}
TabbedContent.init();
var isTabSelected2 = false;
var lastSelectedTabLeftPos2;
$(".tab_item2").mouseover(function() {
var $this2 = $(this);
$this2.parent().find(".moving_bg2").stop().animate({
top: $this2.position()['top']
}, { duration: 300 });
});
$(".tab_item2").mouseout(function() {
if(isTabSelected2){
$(".moving_bg2").stop().animate({
top: ""+lastSelectedTabLeftPos2
}, { duration: 300 });
}else
{
$(".moving_bg2").stop().animate({
top: "0"
}, { duration: 300 });
}
});
$(".tab_item2").click(function() {
isTabSelected2 = true;
var $this2 = $(this);
lastSelectedTabLeftPos2 = $this2.position()['top'];
});
var TabbedContent2 = {
current2: {i2:null, obj2:null},
init: function() {
$(".tab_item2").click(function() {
$(".tab_item2").removeClass("tab_item_color2");
$(this).addClass("tab_item_color2");
var $this2 = $(this);
TabbedContent2.slideContent2($this2);
});
TabbedContent2.current2.i2 = 0;
TabbedContent2.current2.obj2 = $(".tabslider2 li").eq(0);
},
slideContent2: function($obj2) {
var $container2 = $obj2.closest(".tabbed_content2"),
$contentContainer2 = $('.slide_content2'),
$tabslider2 = $contentContainer2.find(".tabslider2");
var i2 = $obj2.index() - 1;
var $lis2 = $tabslider2.find("li");
$new2 = $lis2.eq(i2);
if(i2 === TabbedContent2.current2.i2) {
return;
}
$lis2.hide().filter($new2.add(TabbedContent2.current2.obj2)).show();
var margin_1b = (i2 < TabbedContent2.current2.i2) ? 0 : -$new2.width();
var margin_2b = (i2 > TabbedContent2.current2.i2) ? 0 : -$new2.width();
$tabslider2.stop().css({
marginLeft: margin_1b + "px"
}).animate({
marginLeft: margin_2b + "px"
}, 400);
TabbedContent2.current2.i2 = i2;
TabbedContent2.current2.obj2 = $new2;
}
}
TabbedContent2.init();
Спасибо за вашу помощь
Проверьте вашу скрипку, он, кажется, не работает для меня –
Да, jQuerry не был загружен в тот скрипку. Загрузите его, и он начнет работать для элементов первого уровня. – shariqkhan
См. Здесь http://stackoverflow.com/questions/38915965/slide-two-divs-simultaneous – Developer