附加div元素,然后使用JQUERY从右向左动画

时间:2017-04-19 06:42:53

标签: javascript jquery html css jquery-animate

我想输入一条消息,然后点击提交按钮调用'shoot',它将显示在屏幕的右侧。但是,我希望文本从右到左动画/滑动。 我该怎么做?

private class MyWebviewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url)
    {

        boolean value = true;
        String extension = MimeTypeMap.getFileExtensionFromUrl(url);
        if (extension != null) {
            MimeTypeMap mime = MimeTypeMap.getSingleton();
            String mimeType = mime.getMimeTypeFromExtension(extension);
            if (mimeType != null) {
                if (mimeType.toLowerCase().contains("pdf")
                        || extension.toLowerCase().contains("ppt")
                        || extension.toLowerCase().contains("doc")
                        || extension.toLowerCase().contains("rar")
                        || extension.toLowerCase().contains("rtf")
                        || extension.toLowerCase().contains("exe")
                        || extension.toLowerCase().contains("apk")
                        || extension.toLowerCase().contains("jpeg")
                        || extension.toLowerCase().contains("png")
                        || extension.toLowerCase().contains("xls")
                        || extension.toLowerCase().contains("zip")
                        || extension.toLowerCase().contains("jpg")) {
                    DownloadManager mdDownloadManager = (DownloadManager)getSystemService(Context.DOWNLOAD_SERVICE);
                    DownloadManager.Request request = new DownloadManager.Request(
                            Uri.parse(url));
                    String name= URLUtil.guessFileName(url,null,MimeTypeMap.getFileExtensionFromUrl(url));
                  File destinationFile = new File(Environment.getExternalStorageDirectory(),name);
                    request.setDescription("Downloading via Your app name..");
                    request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
                   // request.setDestinationUri(Uri.fromFile(destinationFile));
                    request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS,name);
                   mdDownloadManager.enqueue(request);
                    //value = false;
                }
            }
            if (value) {
                view.loadUrl(url);
            }
        }
        return false;

    }
}
$('.submmit').click(function() {
  var c = "<div class='movethis' class='width: 40px;height: 50px;position: absolute;right: 0;'>" + $(".mytxt").val() + "</div>";
  $(".putbullet").append(c).animate({ "left": "0px" }, "slow");
  $(".movethis").animate({ "left": "0px" }, "slow");
  $(".movethis").css('right', '');
});

1 个答案:

答案 0 :(得分:2)

问题是因为您在animate()元素上调用了.putbullet,而不是您追加的.movethis。您还需要在style属性中设置样式,而不是class - 或者更好,将它们放在外部样式表中。

最后,您还需要在position: relative上设置.putbullet,以便在动画时附加的元素包含在其中。试试这个:

&#13;
&#13;
$('.submmit').click(function() {
  $('<div class="movethis">' + $(".mytxt").val() + '</div>').appendTo('.putbullet').animate({
    "left": "0px"
  }, "slow");
});
&#13;
.putbullet {
  position: relative;
}
.movethis {
  width: 40px;
  height: 50px;
  position: absolute;
  right: 0;
}
.areaofcontent {
  width: 68%;
  float: right;
  background-color: #eee;
  height: 400px;
  overflow-y: scroll;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="txt" class="mytxt">
  <input type="button" class="submmit" value="Shoot">
</div>
<div class="areaofcontent">
  <div class="putbullet"></div>
</div>
&#13;
&#13;
&#13;