如何动画div标签从右向左滑动？

Question

我正在尝试开发响应式网页。如果我单击一个图像，它必须从右到左显示mymodal div，如slidetoggle（从图像到右向左滑动）。 如果我使用下面的方法nothings发生（使用stackoverflow中建议的许多其他代码用于类似的问题）。如果我调整网页大小，Div标签会移动到不同的位置。如何实现这个任务？任何guidanece pls

＆＃13;

＆＃13;

$('#mypic').click(function() {

  $('#myModal').toggle("slide", {
    direction: "right"
  }, 700);


});

＆＃13;

.my-modal-header {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
}

.my-modal-body {
  padding: 2px 16px;
}

.my-modal-footer {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
  text-align: center;
}

.my-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#closemymodal : {
  position: absolute;
  top: 50%;
  align: center;
}

.my_modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: -1px;
  right: 10px;
  top: 55px;
  width: 100%;
  height: 100%;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="mypic" height='25' width='25'>

<div id="myModal" class="my_modal" style="overflow:hidden;">

  <div class="my-modal-content">
    <div class="my-modal-header">
      <span class="my_modal_close">&times;</span>
      <h2 style="font-family: Trebuchet MS, sans-serif !important; font-size:12px;">Select value</h2>
    </div>
    <div class="my-modal-body">

      <table style="width: 100%">
        <tr>
          <td style="width: 25%"><label style="font-family: Trebuchet MS, sans-serif !important">select:
    						</label></td>
          <td style="width: 75%" id="modalSelectTd">
            <select id="modalValue"> 
    								
    								<option>  </option> 
    								<option>  </option> 
    								</select>
          </td>
        </tr>
      </table>

    </div>
    <div class="my-modal-footer">
      <button id="closemymodal">Close</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查此工作代码段。

＆＃13;

＆＃13;

$('#mypic').click(function() {

      $('#myModal').toggleClass("open");
 });

＆＃13;

.my-modal-header {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
}

.my-modal-body {
  padding: 2px 16px;
}

.my-modal-footer {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
  text-align: center;
}

.my-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#closemymodal : {
  position: absolute;
  top: 50%;
  align: center;
}

.my_modal {

  position: fixed;
  z-index: 99999;
  opacity:0;
  
  top: 55px;
  width: 100%;
  height: 100%;
  overflow: auto;
  right: -320px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
}
.my_modal.open{
right: 10px;
opacity:1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="mypic" height='25' width='25'>

<div id="myModal" class="my_modal" style="overflow:hidden;">

  <div class="my-modal-content">
    <div class="my-modal-header">
      <span class="my_modal_close">&times;</span>
      <h2 style="font-family: Trebuchet MS, sans-serif !important; font-size:12px;">Select value</h2>
    </div>
    <div class="my-modal-body">

      <table style="width: 100%">
        <tr>
          <td style="width: 25%"><label style="font-family: Trebuchet MS, sans-serif !important">select:
    						</label></td>
          <td style="width: 75%" id="modalSelectTd">
            <select id="modalValue"> 
    								
    								<option>  </option> 
    								<option>  </option> 
    								</select>
          </td>
        </tr>
      </table>

    </div>
    <div class="my-modal-footer">
      <button id="closemymodal">Close</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要包含 JQuery UI 才能使其正常工作

Working demo

$('#mypic').click(function() {

  $('#myModal').toggle("slide", {
    direction: "right"
  }, 700);


});

Answer 3

我使用hover代替click。如果你不想使用JQueryUI，可以使用它。 这是纯粹的css 。在hover图片上，你的div会出现。

＆＃13;

＆＃13;

.my-modal-header {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
}

.my-modal-body {
  padding: 2px 16px;
}

.my-modal-footer {
  padding: 2px 16px;
  background-color: #424242;
  color: white;
  text-align: center;
}

.my-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#closemymodal : {
  position: absolute;
  top: 50%;
  align: center;
}

.my_modal {
z-index: 99999;
  left: calc(100%);
 position: fixed;
  top: 55px;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

#mypic:hover + #myModal {
    left:0px;
  }

＆＃13;

<img id="mypic" height='25' width='25'>

<div id="myModal" class="my_modal" >

    <div class="my-modal-content">
            <div class="my-modal-header">
                    <span class="my_modal_close">&times;</span>
                    <h2 style="font-family: Trebuchet MS, sans-serif !important; font-size:12px;">Select value</h2>
            </div>
              <div class="my-modal-body"> 

                <table style="width: 100%">
                    <tr>
                        <td style="width: 25%"><label
                            style="font-family: Trebuchet MS, sans-serif !important">select:
                        </label></td>
                        <td style="width: 75%" id="modalSelectTd">
                                <select id="modalValue"> 

                                <option>  </option> 
                                <option>  </option> 
                                </select>
                            </td>
                    </tr>
                </table>

          </div>
        <div class="my-modal-footer">
            <button id="closemymodal">Close</button>
         </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;