jQuery動畫隊列假不工作

我已經嘗試了多種瀏覽StackOverflow的解決方案，主要解決方案似乎是queue: false但是這對我不起作用。jQuery動畫隊列假不工作

我只是試圖讓.cover和.controls在開始和完成結果正確的同時進行動畫製作，但動畫不是。

$(".cover .controls .scale").click(function() { 
 
    $(".currently_playing .cover").animate({ 
 
    height: "50px", 
 
    width: "50px", 
 
    margin: "20px 80px 0 80px" 
 
    }, { 
 
    queue: false 
 
    }); 
 
    $(".currently_playing .cover .controls").animate({ 
 
    height: "50px", 
 
    width: "50px" 
 
    }, { 
 
    queue: false, 
 
    }); 
 
});

.currently_playing .cover { 
 
    float: left; 
 
    margin: 20px 20px 5px 20px; 
 
    height: 210px; 
 
    width: 210px; 
 
} 
 
.currently_playing .cover img { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.currently_playing .cover .controls { 
 
    position: absolute; 
 
    height: 210px; 
 
    width: 210px; 
 
    z-index: 9999; 
 
} 
 
.currently_playing .cover .controls:hover { 
 
    background: rgba(0, 0, 0, 0.75); 
 
    -webkit-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.currently_playing .cover .controls .scale { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 30px; 
 
    width: 30px; 
 
    background: url(http://i743.photobucket.com/albums/xx78/MrTIMarshall2512/artwork_scale_zps1ztoz3qv.png) no-repeat; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="currently_playing"> 
 
    <div class="cover"> 
 
    <div class="controls"> 
 
     <div class="scale"></div> 
 
    </div> 
 
    <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork"> 
 
    </div> 
 
</div>

來源

2016-09-08 Tim Marshall

有您無法爲縮放圖標添加替代圖片的原因？如果其中一個動畫元素甚至不存在，就很難確切地確定問題所在。 –

@DarrenSweeney @DarrenSweeney這是一個自我解釋，他們並不是在同一時間的動畫，請不要只是把一個沒有代碼的小提琴或甚至解釋你想要做的除了模糊的標題 –

@DarrenSweeney。 –

你的問題是可以解決的做一些更改CSS，沒有動畫元素都只是母公司cover：

$(".cover .controls .scale").click(function() { 
 
    $(".currently_playing .cover").animate({ 
 
    height: "50px", 
 
    width: "50px", 
 
    margin: "20px 80px 0 80px" 
 
    }); 
 
});

.currently_playing .cover { 
 
    float: left; 
 
    margin: 20px 20px 5px 20px; 
 
    height: 210px; 
 
    width: 210px; 
 
    position: relative; 
 
} 
 
.currently_playing .cover img { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.currently_playing .cover .controls { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 9999; 
 
    -webkit-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.currently_playing .cover .controls:hover { 
 
    background: rgba(0, 0, 0, 0.75); 
 
} 
 
.currently_playing .cover .controls .scale { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 30px; 
 
    width: 30px; 
 
    background:url(images/temp/artwork_scale.png) no-repeat; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="currently_playing"> 
 
    <div class="cover"> 
 
    <div class="controls"> 
 
     <div class="scale"></div> 
 
    </div> 
 
    <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork"> 
 
    </div> 
 
</div>

來源

2016-09-08 15:08:54 DaniP

這是一種魅力！非常感謝你:) –

@TimMarshall樂於幫助U隊友 – DaniP

jQuery動畫隊列假不工作

回答

相關問題