无法在Jquery中从右到左切换

Question

我有两个图标（Bootstrap Glyphicon），一个放在屏幕左侧的菜单，另一个放在右侧的礼物。当点击“菜单”时，切换从左到右出现，这很好。但是当点击“礼物”时，它会以某种奇怪的位置出现，如图像中所示，名称为Suraj Palwe，这在图像的左部分。我希望它从屏幕右侧出现，向左移动，根据div的宽度调整位置。这是它的外观图片。 JSfiddle 以下是我在代码中编写的内容：

.slide_birthday_click{
          margin-top: 2%;
          padding: 5px;

          background: grey;
          height: auto;
          display:none;
          position:absolute;
          z-index: 5;
          float: right;
        }

在html主体中

<div class="slide_birthday_click">
        <table class="table">
          <tr>
            <td>Suraj Palwe</td>
          </tr>
        </table>
    </div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>

jQuery 部分

$("#today_birthdays").click(function(){
        $(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
      });

我希望那个包含单词Suraj Palwe的块可以在屏幕从右到左切换时移动到屏幕右侧。

我无法确定我的代码错在哪里。提前感谢！

- Suraj Palwe

---

尝试这个。$（“＃today_birthdays”）.click（function（）{ $（“.slide_birthday_click”）.toggle（“ease”）; }）; - Zohaib Waqar

@ZohaibWaqar 不对，这个仍然从左边获取。我想要从右边获取。 - Suraj Palwe

你的代码在我的电脑上无法运行，我不知道为什么。但是我已经检查了这段代码，请尝试使用以下代码：$(".slide_birthday_click").hide(0).delay(0).toggle('slide', { direction: 'right' }, 1000); - Newinjava

你是否已经加载了jquery-ui？ - dingo_d

@dingo_d 两个 cdn 都链接了 CSS 和 JS。 - Suraj Palwe

Answer 1

请尝试以下方法：

$("#today_birthdays").delay(200).show("slide", { direction: "right" }, 1500);

- Lewis

---

不，这仍然来自左侧。 - Suraj Palwe

查看更改并根据您的喜好进行编辑。 - Lewis

Answer 2

好的，这是我解决问题的方法。它缺少一件事!

只需在 CSS 文件中添加 right:0;

.slide_birthday_click{
      margin-top: 2%;
      padding: 5px;
      background: grey;
      height: auto;
      display:none;
      position:absolute;
      z-index: 5;
      float: right;
      right: 0;
    }

感谢大家！

这是链接到JS Fiddle答案的链接。

- Suraj Palwe