我如何切換jQuery中單擊功能

HTML

<a href="#" class="button">button</a> 

<div class="holder"> 

    <img src="http://placehold.it/350x150" /> 
    <div class="content"> 
     <h3>hello there</h3>  
     <a href="#">view more</a>   
    <div/>  

</div>

CSS

.holder { 
    margin-top: 130px; 
    position: relative; 
} 
img {  
    position: relative; 
    display: block; 
    transition: -webkit-transform 0.5s; 
    transition: -moz-transform 0.5s; 
    z-index: 10; 
} 
.content { 
    background: blue; 
    height: 100%; 
    color: white; 
    z-index: 1; 
    position: absolute; 
    top: auto; 
    bottom: 0; 
} 
a { 
    color: white; 
    background: red; 
    padding: 10px; 
} 

.holder:hover img { 
    -webkit-transform: translateX(90px); 
    -moz-transform: translateX(90px); 
} 
.button { 
    background: green; 
    position: absolute; 
    top: 10px; 
}

JQuery的

if (Modernizr.touch) { 
    alert("touch support"); 
} 

else { 
    alert("no touch support"); 

    $('.button').toggle(
    function(){ 
      $('img').css({ 
       '-webkit-transform' : 'translateX(90px)', 
       '-moz-transform' : 'translateX(90px)'     
      }); 
    }, 
    function(){ 
    $('img').css({ 
      '-webkit-transform' : 'translateX(-90px)', 
      '-moz-transform' : 'translateX(-90px)'     

      }); 
    }); 
}

我正在使用modernizer來檢測觸摸設備。在這段代碼中，當用戶將鼠標懸停在圖像上時，它揭示了.content類，我試圖用jquery複製觸摸設備，因爲懸停不適用於觸摸設備。（爲了檢查jquery代碼，我寫了代碼使用非觸摸設備）

我的問題是1）這段代碼是否正確2）jquery代碼是通過點擊來改變圖像的位置。而不是按鈕消失。

這是我用純CSS完成 - >jsfiddle-css

這就是我試圖用jQuery這是不行的複製 - >jsfiddle with jquery

來源

2013-06-25 The Last Coder

F.Y.I. '.toggle（fn1，fn2）'事件已被棄用。 –

@PalashMondal你能幫我做這件事嗎？ :) –

是！完成請參閱[小提琴]（http://jsfiddle.net/Zvraw/12/） –

這可能是一個辦法：

if (Modernizr.touch) { 
    alert("touch support"); 
} else { 
    alert("no touch "); 
    var cssChanged = false; // remember wether the css has been changed 
    // Note: I use true/false, but you could also use a counter, so you can make each Nth click do something 
    $('.button').click(function(){ 
     if(cssChanged===false) 
      $('img').css({ 
       '-webkit-transform' : 'translateX(90px)', 
       '-moz-transform' : 'translateX(90px)'     
      }); 
      cssChanged = true; // remember css has been changed 
     } 
     else{ 
      $('img').css({ 
       '-webkit-transform' : "", 
       '-moz-transform' :""     
      }); 
      cssChanged = false; // set var back to unchanged 
     } 
    }); 
}

來源

2013-06-25 10:06:27 Martijn

http://jsfiddle.net/Zvraw/13/謝謝隊友 –

FYI只有

爲了解決當前的issue，使用jQuery Migrate plugin：

使用插件是容易的;例如，在jQuery的腳本標籤之後立即包含它。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>

欲瞭解更多信息，請參閱jQuery Migrate documentation。

FIDDLE DEMO

來源

2013-06-25 10:41:05

我如何切換jQuery中單擊功能

回答

相關問題