使用Javascript功能（冷凝代碼）更改CSS

Question

我還是新的JavaScript（更不用提一個設計師，當然不是開發商），所以大家多多包涵。

我想在我的CSS使用一些隨機數，我可以找到適合該法案的唯一辦法就是加入一些JavaScript來生成隨機數，然後修改CSS。這個想法是獲得一些幻燈片動畫到視圖中，旋轉懸停，當點擊另一個類別時動畫。

我已經成功地得到它我的文檔中工作，無論是在負載並從點擊按鈕叫，但我可以得到它的工作的唯一辦法是，如果我寫出來的每個實例的全部代碼。每次都是一樣的，所以當我需要改變某些事情時，說一個過渡時間，我必須在多個位置反覆地做。它現在可行，但肯定不理想。

我不會把完整的代碼在這裏（因爲它是荒謬長），但這裏有一個例子。我有這樣的：

$(function() { 
    $("#printLink").click(function() { 

    $(".print").each(function() { 
     $(this).css({ 
     "left":(Math.floor(Math.random()*10)-5), 
     "bottom":(Math.floor(Math.random()*10)-5), 
     }); 
    }); 

    $(".web, .motion").each(funtion() { 
     $(this).css({ 
     "left":(Math.floor(Math.random()*200)-100) + '%', 
     "bottom":(Math.floor(Math.random()*500)+500), 
     }); 
    }); 

    }); 
}); 

好了，有一個按鈕#printLink和幻燈片的不同組帶班.PRINT，名.web和.motion（在演示下面的鏈接中有運動部分沒有幻燈片） 。這個想法是，當我點擊#printLink時，.print幻燈片將移動到視圖中，並且.web和.motion隨着屏幕移動而滑動。就像我說的，我已經有了所有這些工作，但我必須一次又一次地指定所有的CSS。

我想吃點什麼是一樣的東西：

function moveIn(){ 
    $(this).css({ 
    "left":(Math.floor(Math.random()*10)-5), 
    "bottom":(Math.floor(Math.random()*10)-5), 
    }); 
} 

function moveOut(){ 
    $(this).css({ 
    "left":(Math.floor(Math.random()*200)-100) + '%', 
    "bottom":(Math.floor(Math.random()*500)+500), 
    }); 
} 
$(function() { 
    $("#printLink").click(function() { 
    $(".print").each(function() { 
     moveIn(); 
    }); 
    $(".web, .motion").each(function() { 
     moveOut(); 
    }); 
    }); 
}); 

這樣我就可以在每次引用CSS的相同的字符串，並最大限度地減少不匹配的代碼的機會。

這裏有一個reference link給你什麼，我說什麼更好的主意。

Answer 1

而且，這有什麼錯：

$(function() { 
    $("#printLink").click(function() { 
    $(".print").each(moveIn); 
    $(".web, .motion").each(moveOut); 
    }); 
}); 

您定義的兩個函數應該很好地工作。

Answer 2

如果你想擁抱CSS3，並沒有爲隨機數，你可以在你的CSS幾類處理這個需要...

.print, .web { 
    display: absolute; 
    top: 500px; left: -1000px; 
    opacity: 0.0; 
    -webkit-transition: all 0.5s ease-in-out; 
} 
.printOn, .webOn { 
    top: 0px; left: 0px; 
    opacity: 1.0; 
} 

然後你的鏈接可以切換這些類...

$(function() { 
    var $print = $('.print'), $web = $('.web'); 
    $("#printLink").click(function(e) { 
     $print.addClass('printOn'); 
     $web.removeClass('webOn'); 
     e.preventDefault(); 
    }); 
    $("#webLink").click(function(e) { 
     $web.addClass('webOn'); 
     $print.removeClass('printOn'); 
     e.preventDefault(); 
    }); 
}); 

注意：在撰寫本文時，「transition」屬性得不到很好的支持。但即使在不支持它的瀏覽器中，鏈接也應該被顯示和隱藏 - 只是沒有任何動畫。