Есть произвольное меню. Под ним двигается блок. По наведении на определенный элемент блок плывет к нему. Скрипт для него работает после перезагрузки страницы. Вопрос почему?
$(document).ready(function() {
var item = document.getElementsByClassName('cur-item')[0];
$('.wrapper ul li').on('mouseenter',
function(evt) {
item.style.transform = 'translateX(' + (this.offsetLeft + 100) + 'px)';
});
});
.wrapper{
width:800px;
overflow:hidden;
}
.wrapper ul{
width:800px;
height:95px;
overflow:hidden;
margin-bottom:10px;
}
.wrapper ul li{
width:95px;
height:95px;
margin-right:5px;
float:left;
display:inline-block;
background-color:#33a030;
}
.cur-item{
width:95px;
height:30px;
display:inline-block;
position:absolute;
left:-100px;
background-color:#33a030;
transition: transform 0.3s ease-in;
will-change: transform;
}
.current{
background-color:#000!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="cur-item"></div>
</div>
Помогите пожалуйста решить задачу. Может есть другой способ?
jQuery(document).ready(function($){
jQuery("#nivolightbox-MA4QP-3941 a.nivolightbox").nivoLightbox({
effect: "fade",
theme: "default",
keyboardNav: true,
clickOverlayToClose: true,
errorMessage: "The requested content cannot be loaded. Please try again later.",
});
});
Uncaught TypeError: jQuery(...).nivoLightbox is not a function