Почему JavaScript в javascript не работает в моем коде?

Question

Почему in-viewport javascript не работает в моем коде?

https://jsfiddle.net/vncxfx0s/30/

Когда нажмите на Click to move кошки изображение будет скользить это нормально.

Но когда я заполнить код

if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 

обнаружить, когда id="testtest" шоу в окне проекции это будет необходимо быть начеку.

Но это ничего не работает, как я могу это сделать?

<div style="cursor: pointer;" id="move-left" onclick="left_fn(-422)"> 
     Click to move 
    </div> 


    <div style=" width: 500px; overflow: hidden; "> 
     <ul style=" width: 2000em; transition: transform 200ms ease-in-out; transform: translate3d(0px, 0px, 0px); margin-left: -10px; padding: 0;" id="cat-ul"> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li id="testtest" style="width: 1px; display: inline-table;"> 
      </li>    
     </ul> 
    </div> 

<script> 
function left_fn(value) { 
    if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)"; 
    var x = (value + 422); 
    var y = (value - 422); 
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')') 
} 
</script> 

Answer 1

Потому что вам нужно иметь JQuery включен для этого https://jsfiddle.net/vncxfx0s/31/

<script> 
function left_fn(value) { 
    if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)"; 
    var x = (value + 422); 
    var y = (value - 422); 
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')') 
} 
</script>