Question

链接：http://jsfiddle.net/kbJCc/1/

不幸的是，我现在甚至无法使用jquery执行最简单的动画。我在4个按钮中分隔了一个二次div。每个按钮代表我屏幕的一个角落。所以如果我按btn1我的quadrativ div应该动画到左上角。 btn2应该将div设置为右上角的动画。 btn3左下方a.s.o。

现在有两个问题： 1.动画片中的动画不流畅铬（它从一个角落跳到另一个角落） 2.如果我点击了全部（上一个动画之后的一个），div就会卡在左上角。

Firebug告诉我，我的div保留了$ .animate（）所应用的所有css规则？！

希望有人在这里可以帮助我。

非常感谢你。

顺便说一下。 div最初应该以我的窗口为中心：）

Answer 1

问题是animate平滑地将css属性从其当前值转换为指定值。由于最初未设置bottom，因此，点击左下角按钮会将bottom从0设为10px，而不是为top设置动画。

要解决此问题，您只能处理动画top和left。另一个选择是在开始动画之前初始化CSS属性。

Answer 2

我已更新your jsfiddle。基本上，我给了包含main-menu静态维度的元素，以便JavaScript可以从中计算位置。然后，一旦DOM准备就绪，我就通过JavaScript将main-menu元素初始化为文档的“中心”（从技术上讲，这可以，而且应该在样式表中完成）。最后，我更新了您的动画，以明确动画main-menu元素的所有方面。

Answer 3

非常简单的方法

import requests
import pandas

def url(index, st_symbol, exp_date):
 
    headers = {"User-Agent":"Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36"}
    page = requests.get('https://www1.nseindia.com/live_market/dynaContent/live_watch/option_chain/optionKeys.jsp?segmentLink=17&instrument=OPTIDX&symbol=NIFTY&date=20AUG2020', timeout=0.001, headers=headers) # Timeout can be any value, format: <second>.<milisecond>

css

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [startAnimate, setStartAnimate] = useState(false);
  const animate = () => {

    setStartAnimate(!startAnimate);
  };
  return (
    <div className="App">
      <div class={`logo ${startAnimate && "animate"}`}></div>
      <button onClick={animate}>click</button>
    </div>
  );
}

sandbox

每个角落的jQuery动画div以跳跃动画和“固定”元素结束

3 个答案: