動畫格右側（CSS或jQuery的）

我需要動畫此中心（與保證金自動）股利的權利：動畫格右側（CSS或jQuery的）

.button { 
 
\t border-radius:10px; 
 
\t padding:10px 5px; 
 
\t transition:background .4s; 
 
\t box-shadow:inset 0 -2px 0 0 rgba(0,0,0,0.25); 
 
\t cursor:pointer; 
 
} 
 
.button:active { 
 
\t box-shadow:0 0 0 0; 
 
\t position:relative; 
 
\t top:2px; 
 
} 
 

 

 
#submit { 
 
\t font-size:2.5rem; 
 
\t color:#fcfcfd; 
 
\t background: rgba(203, 78, 78, 0.8); 
 
\t width:200px; 
 
\t margin:80px auto 0 auto; 
 
\t transition: margin .5s ease-in-out; 
 
} 
 
#submit:hover { 
 
\t background: rgba(203, 78, 78, 0.5); 
 
}

<div id="submit" class="button">Button that doesn't do anything.</div>

但這裏有一個問題：我無法設置百分比寬度，因爲如果我這樣做，調整瀏覽器大小，文本將從按鈕背景中耗盡，我不想爲文本設置任何媒體查詢。我也嘗試過使用css轉換，但它不能使用margin auto做到這一點。我也試過用jQuery做這樣的：

$(document).ready(function() { 
 
\t   $("#submit").animate({ 
 
\t   \t marginRight: "10%" 
 
      \t }, 500); 
 
     });

和它的作品，而是因爲它重置留給0保證金它的行爲怪異，它關係到正確後。我能做什麼？

來源

2015-05-01 Giacomo Cerquone

是否需要將'div'右移動，保留在視口中？不確定預期的結果是什麼？ – guest271314

如果問題是使用％widths，請將'overflow：hidden;'添加到#submit – Malk

您是否希望div在「go」後單擊右鍵？我對你的需求感到困惑 –

如果我正確地解釋你的問題，這應該工作：

嘗試增加top:80px;的CSS爲#submit，置換left屬性爲margin屬性爲.animate()功能。

$(function() { 
 
    var button = $("#submit"); 
 
    button.css(
 
    "left", "calc(" + ((window.innerWidth/2) - button.width()/2) + "px)" 
 
) 
 
    .animate({ 
 
    left: ((window.innerWidth) - (button.width() + 50)) 
 
    }, 500); 
 
});

.button { 
 
    border-radius: 10px; 
 
    padding: 10px 5px; 
 
    transition: background .4s; 
 
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.25); 
 
    cursor: pointer; 
 
} 
 
.button:active { 
 
    box-shadow: 0 0 0 0; 
 
    position: relative; 
 
    top: 2px; 
 
} 
 
#submit { 
 
    position: relative; 
 
    font-size: 2.5rem; 
 
    color: #fcfcfd; 
 
    background: rgba(203, 78, 78, 0.8); 
 
    width: 200px; 
 
    top: 80px; 
 
    /* margin: 80px auto 0 auto; */ 
 
    transition: left .5s ease-in-out; 
 
} 
 
#submit:hover { 
 
    background: rgba(203, 78, 78, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="submit" class="button">Button that doesn't do anything.</div>

的jsfiddle https://jsfiddle.net/jd8eea3e/2/embedded/result/

來源

2015-05-01 18:13:25 guest271314

首先非常感謝你。正如我在之前的評論中所說的，我不想在點擊後觸發該事件。我不是一個noob，我只是不知道如何說英語:) 我需要的只是當文檔準備就緒（例如）時，將該動作移動到該div的右側。 –

@GiacomoCerquone歡迎您:)不用擔心。查看更新的帖子。 – guest271314

我看到@ guest271314的解決方案，他的JavaScript似乎沒有必要給我，但他讓我知道鈣的CSS功能等我解決了它在這方法：

$(document).ready(function() {  
 
    $("#submit").animate({ 
 
\t  \t left: "70%" 
 
\t }, 500); 
 
}

.button { 
 
\t border-radius:10px; 
 
\t padding:10px 5px; 
 
\t transition:background .4s; 
 
\t box-shadow:inset 0 -2px 0 0 rgba(0,0,0,0.25); 
 
\t cursor:pointer; 
 
} 
 
.button:active { 
 
\t box-shadow:0 0 0 0; 
 
\t position:relative; 
 
\t top:2px; 
 
} 
 

 

 
#submit { 
 
\t font-size:2.5rem; 
 
\t color:#fcfcfd; 
 
\t background: rgba(203, 78, 78, 0.8); 
 
\t width:200px; 
 
\t margin-top:80px; 
 
\t position:relative; 
 
\t left:calc(50% - 100px); /* 50% minus half of the width in pixel */ 
 
\t transition: margin .5s ease-in-out; 
 
} 
 
#submit:hover { 
 
\t background: rgba(203, 78, 78, 0.5); 
 
}

<div id="submit" class="button">Do nothing!</div>

來源

2015-05-01 19:19:47

動畫格右側（CSS或jQuery的）

回答

相關問題