CSSの値を関数のパラメータに基づいてvarに格納して操作する

CSSのプロパティ 'max-width'を使って '.hover'イベントで操作したい要素がいくつかあります。しかし、それらのすべてが異なる値を持っています。たとえば、1つが25％、もう1つが60％です。特定の要素を取り込み、その最大幅の値を格納し、後でアニメーションで使用する関数を作成したいと考えていますすべての可能なシナリオに対して複数の機能やコード行を作成するよりも簡単です。ここでは、擬似コードで意味するものの例を示します。CSSの値を関数のパラメータに基づいてvarに格納して操作する

function Hover (element) { 
    var maxwidth = $(element).css({'max-width': 'value'}); //something like this perhaps? 
    $(element).hover(
     function() { 
      $(this).animate({'max-width': maxwidth + 5%}, "slow"); //actually use the var in the css call 
     }, 
     function() { 
      $(this).animate({'max-width': maxwidth(original value)}, "slow"); //then restore the original value 
     } 
    ); 
}

私がやってみたいことはここではうまくいきます。どんな助けもありがとう。ありがとう！

出典

2016-05-12 JonHerbert

は、それはあなたが$ .each

var collection = []; 
$(element).each(function(){ 
    collection.push($(this).css('max-width')) 
});

出典

2016-05-12 12:29:10

ありがとうございます、確かに、私はvarのために必要な行です。しかし、なぜ最大幅を使用するよりも幅が優れているのでしょうか？ – JonHerbert

私はそのようにアニメ化しようとしていませんが、小さな調査のため、可能だと思います。 –

がここに追加される値のパラメータを受け付ける関数で使用する必要がありますあなたがコレクションのためにおそらく値

var maxwidth = $(element).css('max-width');

を取ることができる方法であります要素の幅の既存の値。値パラメータをパーセンテージとして使用するようにコードを変更し、％で使用するnewWidthの計算を変更するだけで済みます。

$(document).ready(function() { 
 
\t 
 
    $("#test").mouseenter(function() { 
 
    setNewWidth(this.id,100); 
 
    }); 
 
    
 
}); 
 

 

 
function setNewWidth(id,newWidth) { 
 
\t var oldWidth = $("#" + id).css('width'); 
 
\t var n = oldWidth.replace(/px/,""); 
 
\t n = newWidth+parseInt(n); 
 
\t newWidth = n+"px" 
 
\t 
 
\t $("#"+id).animate({ 
 
\t \t width: newWidth 
 
\t }, { 
 
\t \t duration: 500, 
 
\t \t complete: function() { 
 
\t \t \t $("#"+id).animate({width:oldWidth},500); 
 
\t \t } 
 
\t }); 
 
}

button { 
 
\t width: 300px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title></title> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<script src="https://code.jquery.com/jquery.js"></script> 
 
</head> 
 
<body> 
 
<button id="test">test</button> 
 
</body> 
 
</html>

の割合の変化に次の行を使用するには：

n = ((parseInt(n)/100) * newWidth)+ (parseInt(n));

をまた、パラメータとして、期間中に合格し、「継続」のアニメーション属性を設定するときにそれを使用することができますハードコーディングの代わりに、私は '500'という値を使っていました。

出典

2016-05-12 14:37:02

CSSの値を関数のパラメータに基づいてvarに格納して操作する

答えて

関連する問題