2014-07-22 2 views
0

jQuery에서 -=을 처리하는 것이 css()에서 IE8에서 작동하지 않는 것 같습니다. 다음 코드는 오류가 없지만 작동하지 않습니다. 나는 위에서 언급 한 연산자로 그것을 좁혔습니다.= jQuery의 css 메서드에서 연산자가 IE8에서 작동하지 않습니다.

var postCount = $(".postsWrapper .window .posts article").length; 
var numberOfPages = Math.ceil(postCount/3); 
var currentPage = 1; 
var transitioning = false; 
$(".postsWrapper button").click(function() { 
    var direction = $(this).attr("data-direction"); 
    var postWindowWidth = $(".postsWrapper .window").width(); 
    if (direction == "next" && currentPage < numberOfPages && transitioning == false) { 
     transitioning = true; 
     // the below line does nothing in IE8 
     $(".postsWrapper .window .posts").css("marginLeft", "-=" + postWindowWidth); 
     setTimeout(function() { 
      transitioning = false; 
     }, 1000); 
     currentPage++; 
    } else if (direction == "previous" && currentPage > 1 && transitioning == false) { 
     transitioning = true; 
     // the below line does nothing in IE8 
     $(".postsWrapper .window .posts").css("marginLeft", "+=" + postWindowWidth); 
     setTimeout(function() { 
      transitioning = false; 
     }, 1000); 
     currentPage--; 
    } 
}); 

는 문제가 margin-left 속성 값 auto 함께 시작이다, 그래서 JQuery와/감소에게 그것을 증가 할 수 http://www.weblinxinc.com/beta/candy-controls/demo/site/index.htm

+0

'무엇을 않습니다

여기에 라이브 예제에 대한 소스입니까? –

+0

질문이 있습니까? – Soren

+0

이것은 연산자가 아니며, 상대적인 CSS 값입니다 (이것은 전적으로 jQuery 일뿐입니다). –

답변

2

를 참조하십시오. Live Example (아래 소스)

숫자 값으로 처음 설정하면 작업이 시작됩니다. Live example

이것은 jQuery 버그의 자격이 될 수 있습니다. their list을 확인해보십시오. - =`JS에서 할

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Example</title> 
</head> 
<body> 
    <div id="test">I'm the test div</div> 
<script> 
    (function() { 
    "use strict"; 

    // The following line is only in the second example, the one that works; 
    // without it, it doesn't work (in IE8) even though it does in Chrome 
    $("#test").css("marginLeft", 0); 

    var counter = 0; 
    var up = true; 
    display("Initial marginLeft: " + $("#test").css("marginLeft")); 
    setInterval(function() { 
     if (up) { 
     $("#test").css("marginLeft", "+=5"); 
     } else { 
     $("#test").css("marginLeft", "-=5"); 
     } 
     ++counter; 
     if (counter > 10) { 
     counter =0; 
     up = !up; 
     } 
    }, 200); 

    function display(msg) { 
     $("<p>").html(String(msg)).appendTo(document.body); 
    } 
    })(); 
</script> 
</body> 
</html> 
+0

흥미 롭다. 이상하게도 모든 다른 브라우저에서 정상적으로 작동합니다. 감사! – JacobTheDev

+1

@Rev : 예, "왜 증분/감소가 작동하지 않습니까?"라고 생각하여 알아 냈습니다. "값이 숫자가 아니기 때문에"IE8과 Chrome에서'.css ("marginLeft")'결과를 버렸고 IE8에서는'auto '를, Chrome에서는'0px'를 보았습니다. 나의 예에서는). –

관련 문제