JQuery .toggle('幻灯片')未显示我的内容

时间:2016-04-02 19:22:47

标签: javascript jquery html css

我正在为网站制作社交媒体链接,但应该发生的事情是,一旦用户将鼠标悬停在图标上,就会在社交媒体/链接图标的右侧滑出。 我有这个JQuery代码来控制用户悬停时发生的事情:

$("#share").hover(function() {
      $("#social-icon-content").toggle('slide');
      $("#share a").animate({opacity:'1'}, 1);
      $("#share-button").animate({opacity:'1'}, 1);
    });

在Google Chrome浏览器中查看时,它显示正在滑动内容,但在完成滑动后没有任何反应,它会从display: none;切换到display: block;

如果您想了解更多信息,请点击JSFiddle的链接。

2 个答案:

答案 0 :(得分:2)

您需要做的一切:

  1. #!/bin/sh # # Uninstall RVM (Ruby Version Manager) systemwide: # THIS IS DANGEROUS. # # This script tries to eliminate RVM everywhere on the system, # by doing these steps: # # * Run `rvm implode` # * Delete all known RVM-related files everywhere on the system. # * Delete all users' home directory `.rvm` directories and `.rvmrc` files. # * Uninstall all known RVM gems. # * Search the system for potential lingering items and print them. # # ## Use at your own risk # # This script is not advanced: # # * it does not do any error checking # * it does not ensure anything worked # * it does not guarantee success # # If it doesn't work for you, please let us know and we'll improve it. # # We welcome feedback, patches, and pull requests. # # ## Warnings # # Some of the script lines may report missing directories. # # For example, a Mac system typically has a /Users/ directory, # whereas a Linux system typically has a /home/ directory. # You can delete the lines that you don't need, if you like. # # If rvm implode gives errors like this loop: # # line 72: /usr/local/rvm/scripts/rvm: No such file or directory # # then the rvm setup is bonked and we can delete the rvm script # by hand then run this script again; rvm implode won't work, # but the rest of the script will do a decent job of deleting # any lingering rvm files and reporting any remainders. # # Command: rvm-implode-systemwide-danger # Version: 2.0.0 # Created: 2011-08-22 # Updated: 2015-01-25 # License: GPL # Contact: Joel Parker Henderson (joel@joelparkerhenderson.com) ## set -euf out () { printf %s\\n "$*" ; } out "rvm implode" rvm implode out "remove rvm files from system-wide areas" sudo rm -rf /usr/local/bin/rvm sudo rm -rf /usr/local/rvm sudo rm -rf /etc/rvmrc sudo rm -rf /etc/profile.d/rvm.sh out "remove rvm files from all likely user areas" sudo rm -rf /home/*/.rvm sudo rm -rf /home/*/.rvmrc sudo rm -rf /Users/*/.rvm sudo rm -rf /Users/*/.rvmrc sudo rm -rf $HOME/.rvm sudo rm -rf $HOME/.rvmrc sudo rm -rf $(dirname $HOME)/*/.rvm sudo rm -rf $(dirname $HOME)/*/.rvmrc out "uninstall rvm gem as current user and with sudo" gem uninstall -a -q rvm sudo gem uninstall -a -q rvm out "delete rvm group" sudo /usr/sbin/groupdel rvm out "try to find any remaining .rvmrc files, in case you want to delete them" sudo find -L / -name .rvmrc out "try to find rvm text in configuration files, in case you want to edit thme" sudo find -L / -type f | grep "\(bash_login\|bash_profile\|bashrc\|profile\|zshenv\|zshrc\|zlogin\|zlogout\|zprofile\)$" | xargs -I{} grep -Iil "rvm" {} float: left
  2. 添加#share-button属性
  3. #social-icon-content
  4. 设置width: 230px; display: block;
  5. .wsite-social.wsite-social-default
  6. 设置position: absolute属性
  7. #social-icon-content
  8. 添加display: inline-block; float: left;属性

    那就是它!

    Fiddle

答案 1 :(得分:1)

由于链接中没有任何内容,因此无法显示任何内容。

<a href="link">Text To be shown</a>

您尚未输入任何文字黑白链接标记。

如果您想显示没有任何文字的背景图片,有两个选项:

  1. 添加身高&amp;宽度到跨度&amp;制作显示块。

    跨度{ 显示:块; 高度:50像素; 宽度:50像素; }

  2. 将填充添加到具有背景图像的范围。

    跨度{ 填充:20像素; }

  3. 代码中几乎没有变化的工作示例:Working