Question

我有两个jQuery脚本，可以为我的标题添加不同的效果。第一个是悬停效果，将背景颜色从透明变为白色。第二个给它一个固定的位置，并使用另外两个类（.scroll-1＆amp; .scroll-2）来允许它从窗口顶部向下滑动。

我遇到的问题是这两个jQuery动画都使用相同的转换速度，如果有一种方法允许它为转换设置单独的速度，我无法通过任何数量的研究工作多个不同的CSS类。

例如，标题设置为transition: all .5s，在悬停效果的background-color:transparent;和background-color:#fff;之间转换时效果非常好。

然而，在滚动效果上，我希望背景颜色转换是即时的而不是.5s，我不确定是否有一种方法可以为不同的CSS类设置不同值的转换速度。有人可以帮忙吗？

jQuery(document).ready(function($) {

/* HEADER HOVER */

    $(".header").hover(function() {
        
            $("body").addClass("hover");
        
		
    }, function() {
        $("body").removeClass("hover");

    });

/* END HEADER HOVER */

/* HEADER SCROLL */

    $(window).scroll(function() {

        if ($(this).scrollTop() > 75) {

            $('body').addClass('scroll-1'); }
         
        
        if ($(this).scrollTop() > 100) {

            $('body').addClass('scroll-2');
			
		}
		
		else {
			
            $('body').removeClass('scroll-1');
       
        
        		$('body').removeClass('scroll-2');
        }
		
	 });

/* END HEADER SCROLL */


});

/* MAIN SITE STRUCTURE */

html {
  position:relative;
	height:100%;
  background-color:pink;
	
}

body {
   min-height:100%;
   margin:0; 
   padding:0; 

	display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
   		display:flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    	flex-direction: column;
}

.header {
  position:absolute;
  height:50px;
  width:100%;
  background-color:transparent;
  border-bottom-color:black;
  border-bottom-width:2px;
  border-bottom-style:solid;
  transition: all .5s;
}

body.hover .header {
  background-color:#fff;
}

body.scroll-1 .header {
  position:fixed;
  background-color:#fff;
  top:-50px;
}

body.scroll-2 .header {
  top:0px;
}

ul.menu {
  display:inline-block;
}

ul.menu li {
  color:green;
  display:inline-block;
  margin: 0px 20px;
}

.content {
  -webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
  transition: all .6s cubic-bezier(.645,.045,.355,1);
  width:85%;
  margin-top:80px;
  margin-left:auto;
  margin-right:auto;
  padding-top:20px;
}


.footer {
  display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	        align-items: center;

  height: auto;
	width: 100%;		
  padding: 10px 0 10px 0;
  background-color: #efefef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
  <ul class="menu">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
  
</header>


<div class="content">


<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</div>

<footer class="footer">
  Footer
</footer>

jsfiddle

Answer 1

您需要添加的是

body.scroll-1 .header {
  transition: background-color 0s;
}

Answer 2

尝试以下css：

body.scroll-1 .header {
  position:fixed;
  background-color:#fff;
  top:-50px;
   transition: all 0s !important;
}

如何在两个单独的附加类之间转换CSS类？

2 个答案: