Jquery toggleClass和CSS的動畫div寬度

我試圖在鼠標點擊時動畫相鄰的幾個div的寬度。被點擊的div應該展開（樣式爲.slide_active），另一個div應該縮小（樣式爲.slide_inactive）。Jquery toggleClass和CSS的動畫div寬度

<body> 
    <div class="slide"></div> 
    <div class="slide"></div> 
</body>

我想用CSS樣式這些「.slide」的div

.slide { 
    float: left; 
    height: 200px; 
    width: 100px; 
    background-color: salmon; 
    overflow: hidden; 
    -webkit-transition-duration: 0.8s; 
} 

.slide_active { 
    width: 200px; 
    background-color: red; 
} 

.slide_inactive { 
    width: 50px; 
    background-color: black; 
}

所以我還使用CSS動畫的變化的不同狀態，但使用jQuery來切換不同類。

$('.slide').click(function() { 
    $(this).toggleClass('slide_active'); 
    if (!$('.slide').hasClass('slide_active')) { 
    $('.slide').toggleClass('slide_inactive'); 
    }; 
});

這不起作用。如果對代碼只有有限的理解，並且似乎無法弄清楚這一點。

我創建了一個的jsfiddle：

https://jsfiddle.net/thomascs/go571dw9/1/

來源

2016-11-05 thomascs

感謝您的意見！我可能會因爲簡化我的問題而困惑你。在我的應用程序中，我使用4個div和3個可能的狀態，只有.slide或一個.slide_active和所有其他.slide_inactive。 div的寬度可以是10％，25％或70％。 .filter讓我思考，但我用.not代替。這裏是工作代碼：https://jsfiddle.net/thomascs/aj0dvhbm/ – thomascs

感謝您的意見！我可能會因爲簡化我的問題而困惑你。在我的應用程序中，我使用4個div和3個可能的狀態，只有.slide或一個.slide_active和所有其他.slide_inactive。 div的寬度可以是10％，25％或70％。

.filter讓我思考，但我用.not代替。

這裏是工作代碼：jsfiddle.net/thomascs/aj0dvhbm

來源

2016-11-06 11:08:14 thomascs

所以問題是，你檢查是否每幻燈片有slide_inactive類然後切換所有幻燈片上的這個類。

讓我們改變一下代碼：

var $slides = $('.slide'); 

$slides.click(function() { 
    $slides 
     .filter('.slide_active') // filter out all active slides 
     .removeClass('slide_active'); // set slides to unactive 

    $(this).addClass('slide_active'); // set target slide to active 
});

來源

2016-11-05 12:02:51 JasonK

那麼'.slide_inactive'類呢？ –

那麼你可以在'.removeClass（'slide_active'）'後添加'.addClass（'slide_inactive'）'。但想一想;當幻燈片沒有活動的課程時，您可以認爲它不活動。那麼爲什麼要添加另一個課程呢？ – JasonK

由於OP代碼似乎有三種狀態，「活動」，「不活動」和兩種狀態。我同意只有2個狀態更有意義，但這不是他顯示的內容 –

試試這個，利用hasClass() method檢查類由.slide_active類與否。

$('.slide').click(function() { 
 
\t $('.slide').addClass('slide_active'); 
 
    \t $('.slide').removeClass('slide_inactive'); 
 
    if($(this).hasClass('slide_active')){ 
 
    \t $(this).addClass('slide_inactive'); 
 
    $(this).removeClass('slide_active'); 
 
    } 
 
});

.slide { 
 
    float: left; 
 
    height: 200px; 
 
    width: 100px; 
 
    background-color: salmon; 
 
    overflow: hidden; 
 
    -webkit-transition-duration: 0.8s; 
 
    transition:width 0.6s ease; 
 
} 
 

 
.slide_active { 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 

 
.slide_inactive { 
 
    width: 50px; 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide"></div> 
 
<div class="slide"></div>

來源

2016-11-05 12:05:39 frnt

那麼'.slide_inactive'類呢？ –

@RoryMcCrossan隨着OP問他是否試圖在div之間切換，所以我們可以對代碼進行更改，並使其使用add和removeClass工作。 – frnt

你可以這樣做，

$('.parent_slide .slide').on('click', function() { 
 
    $('.parent_slide .slide').addClass('slide_inactive'); 
 
    $(this) 
 
    .removeClass('slide_inactive') 
 
    .addClass('slide_active'); 
 
});

.slide { 
 
    float: left; 
 
    height: 200px; 
 
    width: 100px; 
 
    background-color: salmon; 
 
    overflow: hidden; 
 
    -webkit-transition-duration: 0.8s; 
 
    cursor: pointer; 
 
} 
 
.slide_active { 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 
.slide_inactive { 
 
    width: 50px; 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="parent_slide"> 
 
    <div class="slide"></div> 
 
    <div class="slide"></div> 
 
</div>

來源

2016-11-05 12:12:42 mmativ

Jquery toggleClass和CSS的動畫div寬度

回答

相關問題