用jquery刪除跨度

我試圖用jquery刪除類的跨度。我的目標是在屏幕小於480像素的情況下刪除此跨度。我已經試過.remove（）;但是當屏幕低於480px時它不會刪除跨度。用jquery刪除跨度

我正在使用CSS /媒體查詢來控制和自定義頁面。

這是我小提琴：FIDDLE EXAMPLE

HTML

<span class="textbox">This is what we made of you!</span>

CSS

@media screen and (max-width: 368px) { 
    .container{width: 368px;  margin: 0 auto; 
    padding: 0; display: block;} 

    span .textbox{display: none;} 

    .nav{display: none;} 

    .header{width: 368px;} 
}

JQUERY

$(document).ready(function() { 
    var words = [ 
        'Special', 'Dynamic', 'Simple', 'Great', 'Better', 
        'Stronger', 'Stylish', 'Flawless', 'Envied', 
        'Strong', 'Sucessful', 'Grow', 'Innovate', 'Global', 
        'Knowledgable', 'Unique', 'Trusted', 'Efficient', 
        'Reliable', 'Stable', 'Secure', 'Sofisticated', 
        'Evolving', 'Colorful', 'Admirable', 'Sexy', 'Trending', 
        'Shine', 'Noted', 'Famous', 'Inspiring', 'Important', 
        'Bigger', 'Stylish', 'Expand', 'Proud', 'Awesome', 
        'Solid' 
        ], i = 0; 
     var getRandomWord = function() { 
     return words[Math.floor(Math.random() * words.length)]; 
     }; 

    setInterval(function(){ 
     $('.textbox').fadeOut(500, function(){ 
     $(this).html(getRandomWord()).fadeIn(500); 
    }); 
    }, 5000); 

});

來源

2014-04-02 uniqezor

span .textbox{display: none;}

應該是：

span.textbox{display: none;}

因爲你原來的代碼將選擇具有textbox類有一個跨度父的所有元素，而不是與textbox類實際span元素。

UPDATE

我沒有打擾到你正在使用淡入實際上將覆蓋您display: none財產。最快的修復（不必檢查JS中的窗口寬度和所有......）是爲不透明度設置動畫，而不是使用淡入淡出效果，因爲這不會改變元素的顯示狀態，並且CSS規則將保持活動狀態。

所以，你的間隔功能應該是：

setInterval(function(){ 
    $('.textbox').animate({'opacity': 0}, 500, function(){ 
     $(this).html(getRandomWord()).animate({'opacity': 1}, 500); 
    }); 
}, 3000);

看到它在這裏的行動：http://jsfiddle.net/9B7vz/3/

來源

2014-04-02 03:57:47 Shomz

您當前的CSS並實際上隱藏時的寬度減少到低於480像素的文本，但jQuery的fadeIn函數將它帶回到視圖中，因爲fadeIn將更改該元素的顯示屬性。

來源

2014-04-02 04:01:02 flauntster

嘗試

@media screen and (max-width: 480px) { 
    .textbox { 
     display: none; 
    } 
}

然後

var interval; 
function handler() { 
    var width = $(window).width(); 
    //if window size is > 480 and there is no interval set then create a new interval 
    if (width >= 480 && !interval) { 
     interval = setInterval(function() { 
      $('.textbox').fadeOut(500, function() { 
       $(this).html(getRandomWord()).fadeIn(500); 
      }); 
     }, 5000); 
    } else if (width < 480 && interval) { 
     //if window width < 480 and there is a interval clear it and hide the textbox 
     clearInterval(interval); 
     interval = undefined; 
     $('.textbox').hide(); 
    } 
} 
handler(); 
//to handle resizing of window 
$(window).resize(handler);

演示：Fiddle

來源

2014-04-02 04:02:32

哇，謝謝：d你救了我今天阿倫！ – uniqezor

用jquery刪除跨度

回答

相關問題