加載頁面時到達某一點動寬度的過渡？

我試圖通過在頁面滾動到某一點觸發動畫。這裏是我到目前爲止(Codepen version)：加載頁面時到達某一點動寬度的過渡？

$(window).scroll(function() { 
 
\t var hT = $('#photoshop').offset().top, 
 
\t \t hH = $('#photoshop').outerHeight(), 
 
\t \t wH = $(window).height(), 
 
\t \t wS = $(this).scrollTop(); 
 
\t console.log((hT - wH), wS); 
 
\t if (wS > (hT + hH - wH)) { 
 
\t \t // I need the CSS to happen here, so it happens when the page is scrolled to "photoshop". // 
 
\t } 
 
});

body { 
 
    background-color: black; 
 
} 
 

 
#photoshop { 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #FF5444; 
 
    text-align: left; 
 
    background-color: transparent; 
 
    width: 20%; 
 
    margin-left: 24%; 
 
    margin-bottom: 3px; 
 
    padding: 2px; 
 
    margin-top: 10px; 
 
    padding-left: 3px; 
 
    font-size: 80%; 
 
} 
 
/* this is what I need to happen when the page is scrolled to id="photoshop" 
 

 
#photoshop { 
 
    width: 40%; 
 
    background-color: #134; 
 
    transition: ease-in 400ms; 
 
    -moz-transition: ease-in 400ms; 
 
    -webkit-transition: ease-in 400ms; 
 
    transition-delay: 200ms; 
 
} 
 

 
*/ 
 
.percent { 
 
    display: inline; 
 
    color: #fff; 
 
    margin-right: 3px; 
 
    font-size: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="photoshop"> 
 
\t \t \t \t <div class="percent">80%</div> photoshop 
 
\t \t \t </div> 
 
</body>

我試着做用ID功能的GET元素，但是當我需要它不會加載CSS。我對JavaScript沒有太多瞭解，並希望儘可能使用腳本來做到這一點。有沒有辦法在if (wS > (hT + hH - wH)) {線後更改CSS？

來源

2015-10-19 arsilhavy

試試下面，

您可以使用jQuery addClass方法，

使用CSS只需創建一個新的類，並應用使用addClass方法類當div在視域中可見時

$(window).scroll(function() { 
 
    var hT = $('#photoshop').offset().top, 
 
    hH = $('#photoshop').outerHeight(), 
 
    wH = $(window).height(), 
 
    wS = $(this).scrollTop(); 
 
    console.log((hT - wH), wS); 
 
    if (wS > (hT + hH - wH)) { 
 
    $('#photoshop').addClass("photoshop_trans"); 
 
    } 
 
});

body { 
 
    background-color: black; 
 
} 
 
.dummy { 
 
    height: 500px; 
 
} 
 
#photoshop { 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #FF5444; 
 
    text-align: left; 
 
    background-color: transparent; 
 
    width: 20%; 
 
    margin-left: 24%; 
 
    margin-bottom: 3px; 
 
    padding: 2px; 
 
    margin-top: 10px; 
 
    padding-left: 3px; 
 
    font-size: 80%; 
 
} 
 
/* this is what I need to happen when the page is scrolled to id="photoshop" */ 
 

 
#photoshop.photoshop_trans { 
 
    width: 40%; 
 
    background-color: #134; 
 
    transition: ease-in 400ms; 
 
    -moz-transition: ease-in 400ms; 
 
    -webkit-transition: ease-in 400ms; 
 
    transition-delay: 200ms; 
 
} 
 
.percent { 
 
    display: inline; 
 
    color: #fff; 
 
    margin-right: 3px; 
 
    font-size: 80%; 
 
}

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

 
<body> 
 
    <div class="dummy"></div> 
 
    <div id="photoshop"> 
 
    <div class="percent">80%</div>photoshop 
 
    </div> 
 
</body>

來源

2015-10-19 23:52:23 jlocker

您可以使用jQuery的.css()功能（see docs）。它需要一個json對象，其中包含您希望應用的css屬性和值。所以，你會做這樣的事情：

if (wS > (hT + hH - wH)) { 
    $('#photoshop').css({ 
     'width': '40%', 
     'background-color': '#134', 
     'transition': 'ease-in 400ms', 
     '-moz-transition': 'ease-in 400ms', 
     '-webkit-transition': 'ease-in 400ms', 
     'transition-delay': '200ms', 
    }); 
}

來源

2015-10-19 23:10:45 Vince

加載頁面時到達某一點動寬度的過渡？

回答

相關問題