jQuery的綁定來切換元素

混濁我有以下的JS它採用fadeToggle()其中工程然而細它，我總是顯示跳起來所以想知道一個display:none所以第三元素，如果其能夠改改opacity到0所以理論上這個區塊還在那裏，沒有任何動作。jQuery的綁定來切換元素

$('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) { 
    $(this).find('div.image .banner-overlay').fadeToggle('fade'); 
    $(this).find('.content h2, .content p:first-child, .content p:eq(1)').fadeToggle(); 
});

我可以切換設置opacity對撥動0？

更新爲使用撥動類添加類褪色這只是改變opacity: 0但需要消除它一些如何。

// mobile touch rubbish 
    $('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) { 
     $(this).find('div.image .banner-overlay').toggleClass('fade'); 
     $(this).find('.content h2, .content p:not(".button")').toggleClass('fade'); 
    });

來源

2016-01-22 James

沒錯它設置display:none和元件室消失使元素它需要它的地方之後，而不是你需要使用opacity與animate()功能，就像這樣：

JS Fiddle 1

var toggleFlag = true; 
 

 
$('#btn').on('click', function() { 
 
    
 
    // if the toggle flag is true, we set the opacity to 0, 
 
    // else we set it to 1, and animate the opacity property 
 
    var op = (toggleFlag) ? 0 : 1; 
 
    $('#second-div').stop().animate({'opacity': op}, 500); 
 
    
 
    // finally we switch the toggle flag value to keep in control 
 
    toggleFlag = !toggleFlag; 
 
});

.divs { 
 
    display: block; 
 
    width: 150px; 
 
    height: 100px; 
 
    margin-bottom: 5px; 
 
    background-color: orange; 
 
} 
 
#second-div { 
 
    background-color: tomato; 
 
} 
 
#third-div { 
 
    background-color: skyblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="first-div" class="divs"></div> 
 
<div id="second-div" class="divs"></div> 
 
<div id="third-div" class="divs"></div> 
 
<button id="btn">animate</button>

或者您可以使用.css()功能，像這樣的CSS轉換：

JS Fiddle 2

var toggleFlag = true; 

$('#btn').on('click', function() { 
    var op = (toggleFlag) ? 0 : 1; 
    $('#second-div').css({'opacity': op, 'transition': 'opacity 0.5s'}); 
    toggleFlag = !toggleFlag; 
});

UPDATE：

您需要綁定它要麼touchstart或touchend但不因爲它會響應兩個事件並切換其opacity速度太快，淡入淡出效果不明顯。

JS Fiddle 3

來源

2016-01-22 01:24:20

所以它使用移動toggleClass它設置一個類來改變它的偉大工程，保持位置，但其只是瞬間所以需要淡出過渡透明度我已經重新編碼它。生病看看你上面的例子，雖然是看是否能適應動畫吧:) – James

它不是的onclick順便說一句，效果只發生在移動設備上時touchstart touchend .. – James

虐待更新我做了什麼，現在的問題...它只是切換類添加淡入這確實opaicty：0和回不透明度：1 – James

-1

與opacity:0

.hidden { 
    opacity: 0; 
}

使用jQuery創建CSS類切換上的元素

$("selector").toggleClass("hidden");

https://jsfiddle.net/582yahvc/

來源

2016-01-22 01:29:56 Jaydo

這就是或多或少什麼，我只是做了偉大的工程，但需要改變的不透明度爲瞬間以某種方式消除它進出了。有任何想法嗎？也許與CSS3？理想情況下，如果可能的話，使用jQuery使跨瀏覽器更友好。 – James

OP需要動畫它 –

你的意思是OP？ – James

AFAIK類，這是行爲fadeToggle，你不能做這件事，但你可以使用其他的方法，如fadeTo這更符合您的需求。

fadeTo只改變一個元素的透明度，而切換部分的東西，你必須自己去實現，但它不應該是複雜的。

來源

2016-01-22 01:30:33 iMoses

jQuery的綁定來切換元素

回答

相關問題