我有以下jquery代码
$(document).ready(function() {
$('.anipic').hover(function(){
if ($(this).parent().position().left <= 700) {
$('.bio').css({
'height': $(this).height()+2,
left: $(this).parent().width()
});
}
if ($(this).parent().position().left >= 700) {
$('.bio').css({
'height': $(this).height()+2,
right: $(this).parent().width()
});
}
$(this).css({'background-color':'#55CADF'});
$(this).siblings('.bio').animate(
{ width: '+=160px' },
{ easing: 'swing', complete: function() { $('.biotext').fadeIn(); } }
);
//endmouseover
},
function() {
$(this).css({'background-color':'#ffffff'});
$(this).siblings('.bio').stop().hide().css({'width':'0px'})
$('.bio').hide();
$('.biotext').hide();
})
//end
//enddocumentready
});
您可以在此处看到http://afhboston.com/artists_listnew.php
页面基本上,当我将鼠标悬停在其父级位置小于700px的元素上时,条件语句将被忽略,而位置大于700px的元素将向右移动,而不是左侧。我没有抓住这个错误的运气。
答案 0 :(得分:0)
尝试使用else而不是两个ifs。我怀疑第二个条件总是成立,因为你正在改变你正在检查的属性。
if ($(this).parent().position().left <= 700){
$('.bio').css({ 'height':$(this).height()+2,left:$(this).parent().width()});
}else{
$('.bio').css({ 'height':$(this).height()+2,right:$(this).parent().width()});
}